CODEWITHSUNDEEP
htmlcss
bilal_azam
bilal_azam

Reputation: 4800

Unwanted space at top of heading

I have two boxes of width 300px each, displayed as inline block. Parent container is 600px wide with font-size: 0. With in these boxes, heading h3 has top margin of 20px. Now if both strings in h3 are equal, blocks are displayed correctly but as soon as I make one h3 have smaller string, it goes down. Shouldn't this be aligned at the top ? How can I fix it ?

HTML 

<div class="post-pack-fix">

<div class="home-box">

<h3><a href="#">Some title of the</a></h3>

<div class="meta">
 <a href="#">wordpress</a> / 2 days ago
</div>

<p>
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip 
<a href="#" class="more"> read more  &raquo; </a></p>

</div>
<div class="home-box">

<h3><a href="#">Some title of the post related to this</a></h3>

<div class="meta">
 <a href="#">wordpress</a> / 2 days ago
</div>

<p>
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip 
<a href="#" class="more"> read more  &raquo; </a></p>

</div> <!-- end home box -->

 </div> <!-- post pack fix -->

Styles

.post-pack-fix {
  font-size: 0;
  margin-bottom: 23px;
}

.home-box {
  width: 300px;
  padding-right: 20px;
  display: inline-block;
}

.home-box h3 {
  color: #464646;
  font-size: 20px;
  margin: 20px 0 9px 0;
  line-height: 23px;
  font-weight: 400;
}

see highlighted part

Equal 'h3' strings displayed correctly

Correct

Upvotes: 0

Views: 30

Answers (2)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

The default CSS property for inline-block elements are vertical-align:baseline. So If you want to change the alignment apply it in your home-box code.

.home-box {
  width: 300px;
  padding-right: 20px;
  display: inline-block;
  vertical-align:top;
}

Upvotes: 1

Jonathan Lam
Jonathan Lam

Reputation: 17361

Add vertical-align: top to the first <div>.

This is caused because the two <div>s are lined up at the baseline by default (vertical-align: baseline), as you can see in your picture.

See this JSFiddle as a working example. Try removing vertical-align: top and see what happens.

Upvotes: 3

Related Questions