2017-03-03 86 views
-1

爲什麼缺少頂部和底部的保證金?

.separator { 
 
    border: 1px solid #000000; 
 
    margin: 10px; 
 
}
<!DOCTYPE html> 
 
<html lang="zh-CN"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Separator</title> 
 
    </head> 
 
    <body> 
 
     <div> 
 
      <span>hello</span> 
 
      <span class="separator"></span> 
 
      <span>world</span> 
 
     </div> 
 
    </body> 
 
</html>

我不知道爲什麼<span class="separator"></span>沒有邊距和下邊距?以下兩張照片可以清楚地描述我的問題。

你可以看到分離的邊界是從頂部到底部:

Separator border

但是控制檯顯示邊距和下邊距均爲10px的:

Console

那麼,邊緣頂部和底部邊緣?

回答

1

跨度是一個內聯元素,所以邊距不會垂直(頂部和底部)。將您的跨度封閉在DIV中以使用水平邊距。

.margin { 
    margin: 10px 0 10px 0; 
} 
.separator { 
    border: 1px solid #000000; 
    margin: 10px; 
} 

<div class="margin"> 
    <span>hello</span> 
    <span class="separator"></span> 
    <span>world</span> 
</div> 
0

頂部和底部邊距不會影響內聯元素,因爲內聯元素隨頁面上的內容一起流動。您可以在內嵌元素上設置左邊距和右邊距,但不能頂部或底部填充,因爲它會中斷內容流。您可以在塊上設置頁邊空白(或內聯塊,但只有當您設置垂直對齊權時,纔會看起來是正確的),因爲塊級元素會中斷內容流。

這是從CSS2 specification on inline formatting of elements

在直列格式化上下文中,盒被水平地佈置,一前一後,在包含塊的頂部開始。水平邊界,邊界和填充在這些框之間受到尊重。

0

<span>標籤是默認使用inline顯示屬性,因爲他們不尊重垂直邊距,他們只尊重水平邊距,請參閱下面的參考

CSS2規範狀態的第9.2.4

直列此值使一個元件,以產生一個或多個內聯 框。另外對CSS2規範(第9.4.2節),我們得到 告知,內聯元素只有尊重水平的利潤率

塊級元素尊重橫向和縱向的利潤,而行內元素只能尊重水平的利潤率。
所以,如果你改變你的財產與內聯塊,那麼它會尊重,但你需要做一些進一步的樣式,以實現垂直酒吧。

0

試試這個

body{padding:0;margin:0;} 
 
.separator { 
 
border: 1px solid #000000; 
 
margin: 10px; 
 
display:inline-block;height:20px;vertical-align:middle 
 
}
<!DOCTYPE html> 
 
<html lang="zh-CN"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Separator</title> 
 
    </head> 
 
    <body> 
 
     <div> 
 
      <span>hello</span> 
 
      <span class="separator"></span> 
 
      <span>world</span> 
 
     </div> 
 
    </body> 
 
</html>

相關問題