1. 首頁
  2. 問答
  3. 爲什麼margin-top與inline-block一起工作，而不是inline？

爲什麼margin-top與inline-block一起工作，而不是inline？

2013-10-03 39 views
7

在下面的代碼中，我試圖讓h1元素有一個頂邊距。當我將位置設置爲在css中內聯時，margin-top不顯示。但是，當我將其更改爲內聯塊時，它確實如此。我想知道是否有人可以解釋爲什麼會出現這種情況。謝謝。爲什麼margin-top與inline-block一起工作，而不是inline？

編輯：下面是的jsfiddle代碼：http://jsfiddle.net/pjPdE/

這裏是我的HTML：

<!DOCTYPE html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="MyFirstWebsite.css"> 
    <title> 
     Max Pleaner's First Website 
    </title> 
    </head> 
    <body> 
    <h1>Welcome to my site.</h1> 
    </body> 
</html>

而這裏的CSS

body { 
    background-image:url('sharks.jpg'); 
    } 

h1 { 
    background-color:#1C0245; 
    display:inline; 
    padding: 6.5px 7.6px; 
    margin-left:100px; 
    margin-top:25px; 
}

來源

2013-10-03 macsplean

回答

12

CSS2規範狀態Section 9.2.4：

嵌入塊
該值導致元素生成嵌入級塊容器。內聯塊的內部被格式化爲塊框，並且該元素本身被格式化爲原子內聯級別框。

inline
該值使元素生成一個或多個行內框。

此外上CSS2規範（section 9.4.2）我們得到告知聯元素只尊重水平邊距（proof）：

在直列格式化內容，盒後的水平放置，一個其他，從包含塊的頂部開始。水平邊界，邊界和填充在這些框之間受到尊重。

inline和inline-block之間的區別是，inline元件爲內聯處理而inline-block元件被有效地用作塊（其是與視覺上彼此串聯）處理。

塊級元素同時考慮水平和垂直邊界，而內聯級元素只考慮水平邊界。

來源

2013-10-03 07:56:24

1

只有塊級元素可以有利潤。 給它'display：inline;迫使它（不出所料）成爲一個內聯元素，從而失去了它的邊際。

嘗試使用內聯塊，如果你想保留內嵌與其他內容並利用利潤率。 。 。

來源

2013-10-03 07:50:30

5

<h1>標記默認爲塊元素它允許邊距。使用display: inline將其變成一個內聯元素，例如不允許頁邊距的跨度標籤。

使用display: inline-block可讓您使用這兩個元素的兩個特徵。

將元素顯示爲內嵌級塊容器。的 內該塊被格式化爲塊級框，並且元件本身是 格式化爲一個行內框

參考：w3schools

來源

2013-10-03 07:50:47 Safinn

+0

浮動它有幫助。 –

相關問題

 相關問題