右鍵邊框沒有考慮到頂級的保證金

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