英文:
How do I remove the padding from the main div in Plotly Dash?
问题
我想要移除封装所有内容的主要 Dash div 的填充。它没有 className，所以我无法用 CSS 来影响它。
在图像中，您可以在检查器面板中看到具有 id _dash-app-content 的 div 包含具有问题填充的 div。
我该如何移除这个填充？
英文:
I want to remove the padding from the main Dash div that encapsulates all content. It has no className so I can't affect it with CSS.
In the image, you can see in the Inspector pane that the div with id _dash-app-content contains the div with the problematic padding.
How do I remove this padding?
答案1
得分: 3
你只需要将padding和margin设置为0，如下所示：
app.layout = html.Div( # <------ 主要Div
children=[
html.H1("Hello World!")
],
style={
"padding": "0px", #<---------- 这里
"margin": "0px" #<---------- 这里
}
)
英文:
You just need to set the padding and margin equal to 0 as follows:
app.layout = html.Div( # <------ main Div
children=[
html.H1("Hello World!")
],
style={
"padding": "0px", #<---------- here
"margin": "0px" #<---------- here
}
)
答案2
得分: -1
你可以使用child combinator选择器：
#_dash-app-content > div {
padding: 0;
}
另外，你还可以使用元素的指定样式属性。
div {
width: 100px;
height: 100px;
}
#_dash-app-content div[style="background-color: red;"] {
background-color: blue !important;
}
<div id="_dash-app-content">
<div style="background-color: red;"></div>
</div>
英文:
You can use the child combinator selector:
#_dash-app-content > div {
padding: 0;
}
Optionally, you could also use the specified style attribute of the element.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
div {
width: 100px;
height: 100px;
}
#_dash-app-content div[style="background-color: red;"] {
background-color: blue !important;
}
<!-- language: lang-html -->
<div id="_dash-app-content">
<div style="background-color: red;"></div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论