Html 如何通过 CSS 在 /div 容器中添加填充空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4974932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add padding space in /div container via CSS?
提问by hpy
Beginner page building question:
初学者页面构建问题：
I've got a simple /div container defined via a CSS style called "content_bottom" like such:
我有一个通过名为“content_bottom”的 CSS 样式定义的简单 /div 容器，如下所示：
border-top: 5pt solid #f4f4f4;
padding: 10pt;
border-collapse: separate;
text-align: left;
When I start typing text in it I noticed that the text starts touching the very left edge of the box. I tried to add padding and even borders (via the CSS style) to the container, but there was no effect. However, adding top/bottom borders DID have an effect. Why is this? What should I do so that the text would not start touching the very left (and top) of the box? Thanks.
当我开始在其中输入文本时，我注意到文本开始触及框的最左边缘。我尝试向容器添加填充甚至边框（通过 CSS 样式），但没有任何效果。但是，添加顶部/底部边框 DID 会产生影响。为什么是这样？我该怎么做才能使文本不会开始接触框的最左侧（和顶部）？谢谢。
P.S. This is the full HTML for the page:
PS 这是页面的完整 HTML：
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>site title goes here</title>
<link rel="stylesheet" href="penonek.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="column_top">this <br>
</div>
<div class="content_top">is site title<br>
</div>
<div class="column_bottom">
<ul>
<li>home</li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3<br>
</a></li>
</ul>
</div>
<div class="content_bottom">this is the container's content<br>
</div>
</div>
</body>
</html>
Here is the full CSS:
这是完整的 CSS：
body {
margin: 0;
padding: 0;
text-align: center;
background-color: black;
font-family: Arial,Helvetica,sans-serif;
color: #cccccc;
font-size: 16pt;
}
.wrapper {
margin: auto;
min-width: 900pt;
font-family: Arial,Helvetica,sans-serif;
width: 900pt;
color: #cccccc;
}
.column_top {
border-width: 0 0 5pt;
border-bottom: 5pt solid black;
min-width: 150pt;
color: #333333;
width: 150pt;
max-width: 150pt;
background-color: #f4f4f4;
float: left;
min-height: 45pt;
max-height: 45pt;
height: 45pt;
padding-top: 105pt;
font-size: 40pt;
text-align: right;
font-weight: bold;
}
.content_top {
border-width: 0 0 5pt;
border-bottom: 5pt solid #f4f4f4;
height: 45pt;
min-height: 45pt;
max-height: 45pt;
padding-top: 105pt;
text-align: left;
font-size: 40pt;
font-weight: bold;
}
.column_bottom {
border-width: 5pt 0 0;
border-top: 5pt solid black;
color: #333333;
background-color: #f4f4f4;
width: 145pt;
min-width: 145pt;
max-width: 145pt;
text-align: right;
padding-top: 50pt;
padding-right: 5pt;
float: left;
}
.content_bottom {
border-top: 5pt solid #f4f4f4;
padding: 10pt;
border-collapse: separate;
text-align: left;
}
.column_bottom ul {
margin: 0;
padding: 0;
font-weight: inherit;
color: #333333;
list-style-type: none;
text-decoration: none;
}
.column_bottom a:hover {
background-color: #999999;
}
.column_bottom a {
text-decoration: none;
font-weight: inherit;
color: #333333;
}
采纳答案by jeroen
Your html and css work so there must be a typo somewhere in your css file that causes it to be not used.
您的 html 和 css 可以工作，因此您的 css 文件中的某处一定有错别字，导致它不被使用。
Everything is working as it should. Your problem is that the padding of the box is behind the left-floated nav-bar, your box is really 100% wide although part is hidden behind the bottom nav.
一切正常。你的问题是盒子的填充在左边浮动的导航栏后面，你的盒子真的是 100% 宽，虽然部分隐藏在底部导航后面。
You can solve your problem by floating the .content_bottomcontainer left as well.
您也可以通过.content_bottom向左浮动容器来解决您的问题。
You will need to make some additional changes for the borders, but you can do that in the top section so that you only have one horizontal border instead of 2 touching borders with the same colour.
您需要对边框进行一些额外的更改，但您可以在顶部进行更改，这样您就只有一个水平边框，而不是 2 个具有相同颜色的触摸边框。
回答by Hussein
10px Padding on all sides
10px 内边距
padding:10px;
0px padding on top/bottom and 10px padding on right/left
顶部/底部填充 0px，右侧/左侧填充 10px
padding:0px 10px;
for a combination of sides, you can do this
对于双方的组合，你可以这样做
padding-right:10px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px
You can also use the below shortcut to make top/bottom have different values while keeping right/left the same
您还可以使用下面的快捷方式使顶部/底部具有不同的值，同时保持右侧/左侧相同
padding: 20px 10px 30px;
Now you know everything their is to know about padding.
现在你知道了他们所知道的关于填充的一切。
回答by John Hoge
padding: 5px;
填充：5px；
or padding-top:5px; for just the top
或 padding-top:5px; 只是为了顶部
回答by David
It sounds like you're experiencing collapsing borders. Try border-collapse:separate.
听起来您正在经历边界坍塌。尝试边框折叠：分离。
回答by DanielCW
a mixture of border-collapse:separate and padding: 10px; should do the trick for ya. Post some code for a more detailed explanation.
border-collapse:separate 和 padding: 10px 的混合；应该为你做的伎俩。发布一些代码以获得更详细的解释。
