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

Question

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?

do you mean the answer with 1 vote or 99 votes? you can share the url of the answer by clicking share beneath the answer... an answer url will come up that you can copy — Rachel Gallen, Jun 01 '17 at 05:10
here is a link to explain the asterisk select all https://www.w3schools.com/cssref/sel_all.asp — Rachel Gallen, Jun 01 '17 at 06:46

Luke Davis · Accepted Answer · 2022-10-04T20:40:24.380

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
display(HTML(
    '<style>'
        '#notebook { padding-top:0px !important; } ' 
        '.container { width:100% !important; } '
        '.end_space { min-height:0px !important; } '
    '</style>'
))

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 */

Thanks a lot! That's a lot of horizontal estate back! Also I often display notebooks side by side and got annoyed at the extra white space around columns. I added the following lines to your first solution: `+ "div.prompt { min-width:0px; }"` `+ ".prompt { min-width:0px; }"` — YvesQuemener, Feb 14 '20 at 13:21

stason · Answer 2 · 2018-07-06T22:33:35.747

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.

Outcome

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

Rachel Gallen · Answer 3 · 2017-06-01T06:16:26.620

0

I would add the following to my css

*{margin:0;
  padding:0;
}

html, body, .container{
   margin:0!important;
   padding:0!important;
}

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>"))

edited Jun 01 '17 at 06:16

answered Jun 01 '17 at 05:19

Rachel Gallen

27,943
21
72
81

you can add the html and body css into the inline style also , but css stylesheets are preferable to inline style. – Rachel Gallen Jun 01 '17 at 05:21
Doesn't seem to work for me; it still leaves the top/bottom margins. I don't really know HTML/CSS at all, but I used Inspect Element and found that `.end_space { min-height:0px !important; }` gets rid of the **bottom** margin. Not sure how to get rid of the top margin. Did your solution work for you? – Luke Davis Jun 01 '17 at 05:39
in the container and the div, set margin and padding to !important. You can take out the height thing – Rachel Gallen Jun 01 '17 at 05:42
Sounds like you have more CSS in there. Put a star before margin, padding like this *{margin:0; padding:0;} without any html or body before it just put it in like that – Rachel Gallen Jun 01 '17 at 06:03
Add it and then add the html, body, .container with the ! important after it. No important in the first one. – Rachel Gallen Jun 01 '17 at 06:04
Let me know how that goes – Rachel Gallen Jun 01 '17 at 06:06
You should note that ORDER is important in CSS/style - the *{margin:0; padding:0;} should be at the very top of your style – Rachel Gallen Jun 01 '17 at 06:12
That didn't work either, with correct order. But I figured it out using inspect element and learning that `#` references ids, `.` references class names. Tried your full edited answer as well. Will post answer soon. – Luke Davis Jun 01 '17 at 06:16

score 0 · Answer 4 · answered May 15 '21 at 14:06

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
display(HTML(
    '<style>'
        'div.cell.selected {border: None;}'
    '</style>'
))

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

4 Answers4

Notebook css overrides

Minimizing the impact of the Table of Contents plugin.

Outcome