如何通过CSS在/ div容器中添加填充空间？

我得通过CSS样式定义的简单/ DIV容器称为“content_bottom”像这样的：

border-top: 5pt solid #f4f4f4; 
padding: 10pt; 
border-collapse: separate; 
text-align: left;

当我开始在里面输入文字，我注意到，文本开始触摸框的最左边缘。我试图添加填充，甚至边界（通过CSS样式）的容器，但没有效果。但是，添加顶部/底部边界DID会产生影响。为什么是这样？我应该怎么做才能使文本不会触及框的左边（和顶部）？谢谢。

P.S.这是网页的完整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>

以下是完整的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; 
}

来源

2011-02-11 hpy

填充绝对应该影响您的文本。你可以发布你的实际HTML以及任何应用于DIV的CSS吗？ – drudge 2011-02-11 23:06:52

好的，编辑问题包括完整的HTML（简称）。 – hpy 2011-02-11 23:18:18

查看我的更新回答.... – jeroen 2011-02-11 23:44:43

您的html和css工作 ~~因此，您的css文件中必定存在导致它不被使用的错别字~~ 。

一切正常，因为它应该。您的问题是，框的填充位于左浮动导航栏的后面，尽管部分隐藏在底部导航栏的后面，但您的框确实是100％宽。

您也可以通过将.content_bottom容器左侧浮动来解决问题。

您将需要对边框进行一些额外的更改，但是您可以在顶部部分执行此操作，以便您只有一个水平边框而不是2个相同颜色的边框。

See here for a working example。

来源

2011-02-11 23:36:32 jeroen

填充：5px的;

或padding-top：5px;只为顶部

来源

2011-02-11 23:07:07

padding：5px;只影响顶部和底部，仍然无法获得左侧或右侧填充... – hpy 2011-02-11 23:16:32

这听起来像你遇到崩溃的边界。尝试边框折叠：分开。

来源

2011-02-11 23:08:23 David

感谢您的提示，但这似乎没有做任何事情...... – hpy 2011-02-11 23:15:59

border-collapse的混合：separate and padding：10px;应该为你做这个把戏。发布一些代码以获得更详细的解释。在各方面

来源

2011-02-11 23:10:56 DanielCW

10px的填充

padding:10px;

0像素填充，右边顶部/底部和10px的填充/左

padding:0px 10px;

为双方的组合，你可以做到这一点

padding-right:10px; 
padding-left:10px; 
padding-top:10px; 
padding-bottom:10px

您还可以使用以下快捷方式使顶部/底部具有不同的值，同时保持右/左sa我

padding: 20px 10px 30px;

现在你知道他们所知道的一切有关填充。

来源

2011-02-11 23:15:05 Hussein

如何通过CSS在/ div容器中添加填充空间？

回答

相关问题