右键边框没有考虑到顶级的保证金

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

这是因为margin是盒子外的，但padding包装盒内。所以你应该使用padding来获得考虑。

在浏览器呈现的这张图片边框是红线。

Answer 2

切换到填充：

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

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

Answer 3

保证金不包括在盒子模型的边界内，但填充的。请参阅here以了解更多关于包装盒模型的详细信息

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; 
}