CODEWITHSUNDEEP
htmlcss
Sam Adamsh
Sam Adamsh

Reputation: 3391

html div within div

The div is nested in another div, has its margins and padding at 0, at its width and height set at > 0. Why is the display: inline turning its width and height to 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>

Upvotes: 0

Views: 1248

Answers (3)

apttap
apttap

Reputation: 468

If you need it to be inline, set it as an inline-block, like so:

#a {

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

}

Upvotes: 2

Andy
Andy

Reputation: 1141

Because inline no long displays the div as a block, which is what you want.

W3CSchools defines display:inline;

The element is displayed as an inline element (like span). An inline element has no line break before or after it, and it tolerates HTML elements next to it

In order for your div to appear you have to keep it as display:block; (default). If you're trying to get text next to it, you should try float:left;

Upvotes: 0

Christophe
Christophe

Reputation: 28174

Simply because inline elements don't have a width and height.

Upvotes: 4

Related Questions