0

div 嵌套在另一个 div 中，其边距和填充为 0，其宽度和高度设置为 > 0。为什么 display: inline 将其宽度和高度变为 0？

 <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>
4

3 回答 3

4

仅仅因为内联元素没有宽度和高度。

于 2012-10-27T01:09:24.020 回答
2

如果您需要它是内联的，请将其设置为内联块，如下所示：

#a {

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

}
于 2012-10-27T01:12:27.650 回答
0

因为 inline 不再将 div 显示为块，这正是您想要的。

W3CSchools 定义display:inline;

该元素显示为内联元素（如 span）。内联元素之前或之后没有换行符，并且它可以容忍它旁边的 HTML 元素

为了让您的 div 出现，您必须将其保留为display:block;（默认）。如果您想在它旁边获取文字，您应该尝试float:left;

于 2012-10-27T01:11:22.157 回答