css內聯塊vs浮動

我正在做一些測試float和inline-block，我注意到它們之間有區別。css內聯塊vs浮動

正如你可以從THIS EXAMPLE看到的那樣，如果我使用display:inline-block這些div在它們之間有一點餘量，但是如果我使用float:left它可以按預期工作。

請注意，我使用的是Eric Meyer的Reset CSS v2.0。

這是因爲我做錯了什麼或者這是inline-block行爲的方式（在這種情況下，它不是很可靠）。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>How padding/margin affect floats</title> 
    <link rel="stylesheet" href="css/reset.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div id="wrap"> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
     <div class="square"></div> 
    </div> 
</body> 
</html>

CSS（不復位）

#wrap{ 
    width: 600px; 
    margin:auto; 
} 

.square{ 
    width: 200px; 
    height: 200px; 
    background: red; 
    margin-bottom: 10px; 
    /*display: inline-block;*/ 
    float:left; 
}

來源

2012-11-26 Tomer

給出父元素font-size: 0;。

然後，將孩子的font-size到font-size: 12px（或任何尺寸設計使然），像這樣：

#wrap{ 
    font-size:0; 
} 
.square{ 
    font-size:12px; 
}

來源

2012-11-26 09:03:42

我做對float和inline-block的一些測試，我注意到有是他們之間的差異。

無論資源給你的暗示，他們可能不是是一樣的誤導。他們是completely different things。

的div讓他們

之間的一個小保證金這不是一個margin。這是由HTML中的div之間的換行產生的空間。一種解決方案是刪除換行符，另一種方法是在包含元素上設置font-size: 0（因此導致空格不被渲染）。

請注意，如果您使用第二種方法，則需要在內部div上設置另一個font-size，否則其中的文本將不會呈現。

希望有幫助！

來源

2012-11-26 09:03:32 Chris

謝謝，我不知道換行符被視爲空格。 – Tomer

@ ftom2是的，HTML就是這種情況。同樣，選項卡呈現爲空格。 – Chris

正是由於空間。如果在容器元素上設置了font-size: 0，間隔將消失（請確保重置內聯塊上的font-size）。

來源

2012-11-26 09:03:54 Henrik

據我所知，內嵌塊元素將顯示與原生其他內聯對象相同的自動僞間距。而浮動元素被視爲與文檔的對象流相關的完全獨立（所以，沒有煩人的差距）。

對不起，我不能給出更詳細的答案，但這絕對是我以前摔跤的東西。對於什麼是值得的，間距應該是可靠的惱人的行內塊元素，你只需要記住要補償這些僞裕量如果你正在試圖包含在父元素中的所有東西而不被推到下一行。

來源

2012-11-26 09:15:42 monners

css內聯塊vs浮動

回答

相關問題