CODEWITHSUNDEEP
css
justinw
justinw

Reputation: 3966

Inline block adding bottom space

I have one of my <a> links set to inline-block and there is some space added to the bottom of the containing div. I am not sure how to get rid of this and was wondering if someone could help.

Here is a fiddle: http://jsfiddle.net/RQ69r/1/

Thanks in advance.

Upvotes: 0

Views: 373

Answers (3)

Kevin Lynch
Kevin Lynch

Reputation: 24703

This is the default behavior of inline-block elements. Set the parent div font-size: 0px;

DEMO http://jsfiddle.net/RQ69r/7/

.row_20 {
    width: 20%;
    font-size: 0px;
}

And set the correct font-size of the child element

.header .logo {
    font-size: 13px;  <-- set font size
    height: 45px;
    width: 100%;
    display: inline-block;
    background: blue;
}

Upvotes: 0

Oriol
Oriol

Reputation: 288220

You can fix that adding the following style to the inline-block element:

vertical-align: middle;

Demo

Upvotes: 2

Carl0s1z
Carl0s1z

Reputation: 4723

Why dont you change it to display: block; ?

Check the updated fiddle: http://jsfiddle.net/RQ69r/3/

When you want more <a> elements next to each other (horizontal), you could use list-items and / or float:left;

Upvotes: 0

Related Questions