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

-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>沒有邊距和下邊距？以下兩張照片可以清楚地描述我的問題。

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

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

那麼，邊緣頂部和底部邊緣？

來源

2017-03-03 hellozjf

跨度是一個內聯元素，所以邊距不會垂直（頂部和底部）。將您的跨度封閉在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>

來源

2017-03-03 06:38:13 Jhay

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

這是從CSS2 specification on inline formatting of elements：

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

來源

2017-03-03 06:41:07 mjzeus

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

CSS2規範狀態的第9.2.4：

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

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

來源

2017-03-03 06:43:06 user2809299

試試這個

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>

來源

2017-03-03 07:03:29 sayyednoman

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

回答

相關問題