div內的html div

div嵌套在另一個div中，其邊距和填充爲0，其寬度和高度均設置爲> 0.爲什麼display：inline會將其寬度和高度變爲0？div內的html div

<html> 
<head> 
<style> 

.c 
{ 
    width: 300px; 
    height: 50px; 
    margin:0px; 
    padding:0px; 

} 


#a 
{ 
    display:inline;padding:0px; margin:0px;width:100px;height:20px; 

} 

</style> 
</head> 
<body> 


    <div class="c"> 
     <div id="a" style="background-color:#ff0000;"></div> 
    </div> 

    </body> 
</html>

來源

2012-10-27 Sam Adamsh

只是因爲內聯元素沒有寬度和高度。

來源

2012-10-27 01:09:24 Christophe

因爲內聯不會將div顯示爲一個塊，這正是您想要的。

W3CSchools限定display:inline;

的元件被顯示爲一個內聯元素（如跨度）。內聯元素有之前或之後沒有換行符，並且它容忍HTML元素旁邊

爲了讓您的DIV出現，你必須保持它作爲display:block;（默認）。如果你想獲得它旁邊的文字，你應該嘗試float:left;

來源

2012-10-27 01:11:22 Andy

而且總是有'顯示：inline-block' – LouieGeetoo

這也是如此，但是display：inline-block在IE的老版本中通常會遇到麻煩的問題 - 但它也是一個可行的解決方案。 – Andy

如果你需要它是內聯，將其設置爲inline-block的，就像這樣：

#a { 

    display:inline-block; 
    padding:0px; 
    margin:0px; 
    width:100px; 
    height:20px; 

}

來源

2012-10-27 01:12:27 apttap

回答

相關問題