Why this div tag is getting an margin automatically when I write some content inside that div tag?

Question

<div style="background-color: black;width: 100%;height: 300px;margin-bottom: 30px;">
    
    <div style="width: 30%;background-color: green;height: 100%;display:inline-block;">
            ddsddsd sd sd sddsa
    </div>
    <div style="width: 30%;background-color: yellow;height: 100%;display: inline-block;">
        
    </div>


</div>

I have added a small text inside the green inner DIV tag .suddenly it moved to the down. The same issue happens even when I add another div tags inside that inner div tag. If I remove that inner text then this green div tag will act normal just like that yellow tag. I am not understanding why. Why HTML is acting illogically.. I don't think this has any logical reason.. I feel like quitting HTML..

score 5 · Answer 1 · answered Dec 08 '20 at 12:46

5

This is because inline-block comes with another handy property called vertical-align and by default, your boxes are not vertically set. So by giving them both vertcial-align: middle will solve your issue.

<div style="background-color: black;width: 100%;height: 300px;">
    
    <div style="width: 30%;background-color: green;height: 100%;display:inline-block;  vertical-align:middle;">
            ddsddsd sd sd sddsa
    </div>
    <div style="width: 30%;background-color: yellow;height: 100%;display: inline-block; vertical-align:middle;">
        
    </div>


</div>

Wroking Fiddle

answered Dec 08 '20 at 12:46

Ahmad Habib

2,053
1
13
28

so why by default, the div element moves to the bottom ? Any why my yellow DIV tag didnt moved to the bottom ? – Explorador Dec 08 '20 at 13:00
Because your yellow `
` doesn't have text it has to align.
– Oskar Grosser Dec 08 '20 at 13:02

score -1 · Answer 2 · answered Dec 08 '20 at 12:45

-1

The div tag in HTML by default gives a margin on all 4 sides of the text and you need to normalize the margin using css.

{
  margin: 0;
}

Also to make sure there is no padding too you can modify your css code to

{
  margin: 0;
  padding:0;
}

answered Dec 08 '20 at 12:45

Aditya Sarin

46
6

`div` does not have default margins in any modern, halfway relevant browsers. – CBroe Dec 08 '20 at 12:48
I applied it right now and it gives a by default 8px margin on all sides in Chrome. – Aditya Sarin Dec 08 '20 at 12:57
1

That is the default margin of `body` that you are talking about then. (And still doesn’t change the fact, that your “answer” here has rather little to do with the specific problem that was asked about.) – CBroe Dec 08 '20 at 12:58

Why this div tag is getting an margin automatically when I write some content inside that div tag?

2 Answers2