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?

Answer 1

Update 2019/02/18: Instead of doing the below, I recommend installing jupyterthemes. These notebook themes are awesome and pretty and easy to use, and they eliminate the 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 */

Answer 2

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: