How can I eliminate the gray border around Jupyter/ipython notebooks in my browser?


I read in this thread how to change the cell width for Jupyter notebooks (I used the second answer to do so dynamically). This method eliminates the left-right gray borders.

However, this still leaves a gray border at the top and bottom of the document. How can I also remove that, so that the cells are lying on a clean slate?

Asked By: Luke Davis



I would add the following to my css


html, body, .container{

and that should get rid of the extra space at the top and bottom as well as the sides. If it’s a line you mean by a border, you could add border:0; into the html, body css

Update after seeing comment:

From your given solution, you can also do same with height (height:100%;!important) but in my experience setting 100% to the height property is not as effective as with width (as height is more dynamic) Try the html/body thing first.

example of inline style with html/body attributes:

from IPython.core.display import display, HTML
display(HTML("<style> *{margin:0; padding:0;} html, body, .container{margin:0;!important padding:0;!important} .container { width:100% !important;}</style>"))
Answered By: Rachel Gallen

Update 2022-10-04: Instead of the below, I recommend switching to jupyterlab, which has a much cleaner/more modern notebook display.

Update 2019-02-18:
Instead of the below, I recommend installing jupyterthemes. These notebook themes are beautiful, easy to use, and have no gray border.

Original Post:

So after using "Inspect Element" on a notebook and learning an iota of CSS, it seems the following will work

from IPython.core.display import display, HTML
        '#notebook { padding-top:0px !important; } ' 
        '.container { width:100% !important; } '
        '.end_space { min-height:0px !important; } '

where the top line removes the gray margin at the top, the middle line removes the side margins, and the bottom line removes the gray margin at the bottom.

The content in-between <style>, </style> can also be added to the custom.css file in ~/.jupyter/custom/ following this thread; my file contains the lines

/* Modifications to notebook format  */
#notebook { padding-top:0px !important; }  /* eliminate top gray */
.container { width:100% !important; }      /* eliminate side gray */
.end_space { min-height:0px !important; }  /* eliminate bottom gray */
Answered By: Luke Davis

Experimenting with some of the suggestions and deploying firebug, here are the changes I made to maximize the working space. Using width css attribute didn’t work for me since I occasionally use the table of contents plugin and setting width messes things up.

Notebook css overrides

Add the following css to ~/.jupyter/custom/custom.css:

/* Modifications to notebook layout to maximize working space */

/* maximize working space */
#notebook {
    padding: 5px 0 5px 0 !important;

/* eliminate most of bottom gray */
.end_space {
    min-height: 5px !important;

/* reduce white padding on the outside of the notebook */
#notebook-container {
    padding: 5px;

/* less padding in sub-cells on the left with In[] */
.run_this_cell {
    padding-left: 0px;
    padding-right: 0px;

Of course if you already had something inside that file, you will need to merge the previous settings with this one.

You may need to restart jupyter if I haven’t already had custom.css in place.

Minimizing the impact of the Table of Contents plugin.

At the moment of this writing this plugin forces a thick grey margin on both sides of the main notebook’s body. I requested to make the margin variable configurable. Until this is implemented (if ever), i did:

cd ~/.local/share/jupyter/nbextensions
patch -p0 < margin-width.patch

where margin-width.patch contains:

--- toc2/toc2.js        2018-07-06 15:00:27.139881888 -0700
+++ toc2/toc2.js.fixed  2018-07-06 15:00:36.359743263 -0700
@@ -224,7 +224,7 @@

     function setNotebookWidth(cfg, st) {
-        var margin = 20;
+        var margin = 5;
         var nb_inner = $('#notebook-container');
         var nb_wrap_w = $('#notebook').width();
         var sidebar = $('#toc-wrapper');

You don’t need to restart jupyter for this change to take effect.


Now I get all of the available space nicely utilized without it being too tight:

Snapshot of the notebook after removing wasted grey/white space

Answered By: stason

I came here because I wanted to remove the cell border when it’s selected. I hope this would be useful for someone else.

from IPython.core.display import display, HTML
        'div.cell.selected {border: None;}'
Answered By: Carlos García A.
Categories: questions Tags: , , ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.