CODEWITHSUNDEEP
css
Nrc
Nrc

Reputation: 9787

Inline-block and a pixel at the bottom

I have a simple div with a display: inline-block; and a wrap to center it. It appears a pixel at the bottom of the content. Do you know why and how to get rid of it?

Here is the problem to check: http://jsfiddle.net/8S8aH/

HTML:

<div class="wrap">
    <div id="content"></div>
</div>

CSS:

body{
    margin:0;
}
.wrap {
    text-align: center;
    background:red;
}
#content {
    margin:0px auto;
    text-align:left;
    width:250px; height:100px;
    display: inline-block;
    background:whiteSmoke;
}

Upvotes: 2

Views: 1844

Answers (3)

Adrift
Adrift

Reputation: 59799

Change the vertical-align value on #content

#content {
    display: inline-block;
    vertical-align: bottom;
}

http://jsfiddle.net/8S8aH/4/

Upvotes: 1

Rajender Joshi
Rajender Joshi

Reputation: 4205

Personally, I prefer this to clear space in inline-block elements.

Demo

#content:after{
    content:'\00a0';
}

There are alternatives as well.

Upvotes: 1

Sachin
Sachin

Reputation: 40970

Use display: block for content div

#content {
    margin:0px auto;
    text-align:left;
    width:250px; 
    height:100px;
    display: block;
    background:whiteSmoke;
}

JS Fiddle Demo

Upvotes: 1

Related Questions