右边界没有考虑到最高边际

Question

我的CSS是：

p {
    border-style: solid;
    border-width: 0 15px 0 0;
    border-color: blue;
    margin-top: 20px
}

从http://jsfiddle.net/dcAQW/1可以看出，这会在两段之间创建一个空格。如何删除该空格（即将其设为blue）？

Answer 1

切换到填充：

p {
    border-style: solid;
    border-width: 0 15px 0 0;
    border-color: blue;
    padding-top: 20px
}

http://jsfiddle.net/dcAQW/3/

Answer 2

边框内部没有包含边距，但是填充是。有关框模型的详细信息，请参阅here

Answer 3

这是因为margin开箱即用，但padding在框内。因此，您应该使用padding来考虑。

在此图片边框中，浏览器呈现为红线。

Answer 4

一种方法是在段落上添加一个div，这样css就像下面的代码一样：

div
{
    border-style: solid;
    border-width: 0 15px 0 0;
    border-color: blue;
}
p {

    padding-top: 20px
}

请参阅http://jsfiddle.net/dcAQW/3/

Answer 5

是的，根据盒子模型（如@Mohsen所述），你想要在段落上填充而不是边距。此外，它更简洁，更可读，如下所示：

p {
    border-right: 15px solid blue;
    padding-top: 20px;
}