Question

到目前为止（某种例子，不是真实的）：

HTML：

<html>
<body>
<div id="article">
<h1>TITLE</h1>
<p>text</p>
</div>

CSS

#article {
color:red;
border-bottom: 1px solid black;
}

问题！

我无法划分底部的边框和div本身

这可能对您有所帮助＆gt;＆gt; http://dl.dropbox.com/u/22271794/div.PNG

解决!!

HR TAG帮助了我!! 在Google上搜索＆gt;人力资源标签风格及其价值（MARGIN ZERO，CHANGE COLOR）

Answer 1

只需将padding-bottom设置为div本身，例如

#article {
   color          : red;
   border-bottom  : 1px solid black;
   padding-bottom : 1.5em;
}

Answer 2

边框位于div的底部。这就是重点，你无能为力。如果您希望它与div内部的内容在视觉上分开，则应在底部添加一些填充。

Answer 3

您在寻找padding还是margin？有了这些，您可以设置div及其边框的位置。

#article {
color:red;
border-bottom: 1px solid black;
padding-bottom: 1px;
}

~~如果这不是你的意思，你用划分边界是什么意思？~~这不是你的意思。

编辑：看到你添加的图像后，我认为你应该找到一些其他解决方案然后纯css。我会看到一个带有div的解决方案，其中包含一些拥抱底部的元素，并且是白色的。

<div id="article">
<div></div>
</div>

#article {
color:red;
border-bottom: 1px solid black;
padding-bottom: 1px;
}

#article div {
// add some positioning. 
margin-top: 99%; 
height: 1%;
color: white;
}

这可以让你控制你需要的那个空格。同样，我不认为单独使用CSS就可以做到这一点。

Answer 4

如果您正在使用图像，那么您可以这样做：

img {
    padding-bottom:10px;
    border-bottom: 5px solid red;
}

See this jsfiddle

但是如果你使用带有背景的div，那么你可以使用额外的div来产生差距。例如：

<div>
    <div id="content"></div>
    <div id="space"></div>
    <div id="border"></div>
</div>

和CSS：

#content {
    width:200px;
    height:100px;
    background:#000;
}

#space {
    width:200px;
    height:20px;
}

#border {
    width:200px;
    height:10px;
    background:red;
}

See this jsfiddle

Answer 5

可以使用CSS完成，但可能不是最常用的跨浏览器方式。

HTML

<div>Text Here</div>

CSS

div, div:after {
    display:block;
    background:#00f;
    width:100px;
}

div:after {
    content:" ";
    border-top:1px solid #FFF;
    border-bottom:3px solid #000;
}

演示http://jsfiddle.net/2BQ8f/

如何使用CSS应用边框间距

5 个答案: