Question

div嵌套在另一个div中，其边距和填充为0，其宽度和高度设置为＆gt; 0.为什么显示：内联将其宽度和高度调为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>

Answer 1

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

Answer 2

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

#a {

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

}

Answer 3

因为内联不长会将div显示为块，这就是你想要的。

W3CSchools定义display:inline;

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

为了显示您的div，您必须将其保留为display:block;（默认值）。如果您尝试在其旁边显示文字，则应尝试float:left;

div中的html div

3 个答案: