CODEWITHSUNDEEP
htmlcssspace
starbucks
starbucks

Reputation: 3016

Why is this div adding empty space at the bottom?

I have the following code: 

<div class="line">
<div class="content">Hello, How are you?</div>

CSS:

 .line {
 border-bottom: 1px solid tomato;
 margin: 30px auto;
 width: 852px;
 overflow: hidden;
 }

 .content {
 color: #000;
 font-size: 15;
 }

The .line class is adding space in between the line and the content below it. I am not sure why. What can I do to fix this?

Upvotes: 0

Views: 761

Answers (1)

karthikr
karthikr

Reputation: 99630

margin: 30px auto; evaluates to

margin: 30px auto 30px auto;

That is, 30px on top, and 30px on bottom. Hence the spacing.

If you dont want the space, you can do

margin: 30px auto 0;

Or

margin: 30px auto 0 auto;

Upvotes: 4

Related Questions