如何消除浏览器中 Jupyter/ipython 个笔记本周围的灰色边框？

Question

我在 this thread how to change the cell width for Jupyter notebooks (I used the second answer 中读到动态地这样做）。此方法消除了左右灰色边框

但是，这仍然会在文档的顶部和底部留下灰色边框。我怎样才能同时删除它，以便细胞处于干净状态？

Answer 1

我会将以下内容添加到我的 css

*{margin:0;
  padding:0;
}

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

那应该去掉顶部和底部以及侧面的额外 space。如果它是你所说的边框线，你可以将 border:0; 添加到 html，正文 css

看到评论更新：

根据您给定的解决方案，您也可以对高度 (height:100%;!important) 执行相同的操作，但根据我的经验，将高度设置为 100% 属性不如宽度有效（因为高度是更动态）首先尝试 html/body。

具有 html/body 属性的内联样式示例：

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

Answer 2

更新 2019/02/18：我建议安装 jupyterthemes，而不是执行以下操作。这些笔记本主题很棒、漂亮且易于使用，而且它们消除了灰色边框。

原文Post:

因此在笔记本上使用 "Inspect Element" 并学习了 CSS 的 iota 之后，似乎以下内容可行

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

顶线移除顶部的灰色边距，中间线移除侧边距，底线移除底部的灰色边距。

<style>、</style>之间的内容也可以添加到this thread之后~/.jupyter/custom/的custom.css文件中；我的文件包含行

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

试验一些建议并部署 firebug，这是我为最大化工作所做的更改 space。使用 width css 属性对我不起作用，因为我偶尔会使用 table of contents 插件并设置 width 搞砸了。

笔记本css覆盖

将以下 css 添加到 ~/.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;
}

当然，如果该文件中已有内容，则需要将之前的设置与此文件合并。

如果我还没有 custom.css，您可能需要重新启动 jupyter。

最大限度地减少 Table 目录插件的影响。

在撰写本文时，此插件会在主笔记本正文的两侧强制显示一个厚灰色边距。我要求使 margin 变量可配置。在实现之前（如果有的话），我做了：

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

其中 margin-width.patch 包含：

--- 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');

您无需重启 jupyter 即可使此更改生效。

结果

现在我可以很好地利用所有可用的 space 而不会太紧：

Answer 4

我来这里是因为我想在选中时删除单元格边框。我希望这对其他人有用。

from IPython.core.display import display, HTML
display(HTML(
    '<style>'
        'div.cell.selected {border: None;}'
    '</style>'
))

如何消除浏览器中 Jupyter/ipython 个笔记本周围的灰色边框？

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

html

css

python

ipython-notebook

jupyter-notebook

笔记本css覆盖

最大限度地减少 Table 目录插件的影响。

结果