CODEWITHSUNDEEP
htmlcss
Blake Bowman
Blake Bowman

Reputation: 311

Where is this white space below the list items coming from?

It doesn't appear in safari when I preview it, but it does in other browsers.

Here's the jsfiddle.

You can see the "portfolio" list items have about 2 pixels of white space under each one. Where is this coming from? I've got the padding and margins set to 0 and nowrap but can't figure out any other reason why.. any ideas?

* { 
    margin:0; 
}
html, body { 
    height:100%; 
}
body {
    background-color:#fff;
}
#leftnav {
    background-color:#232323;
    width:20%;
    min-height:100%;
    height: auto !important;
    float:left;
    text-align:center;
    padding:75px 0 0px 0px;
    position:fixed;
    left:0;
    top:0;
}
#portfolio {
    white-space: nowrap;
    text-align:center;
    margin:0;
    width:80%;
    float:right;
}
#portfolio ul {
    margin:0;
    padding:0;
}
#portfolio li {
    width: 25%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin:0;
    padding:0;
    float:left;
}
#portfolio img {
    max-width:100%;
    margin:0;
    padding:0;
}
#maintop {
    width:80%;
    height:45%;
    background-color:#caab7e;
    float:right;
    text-align:center;
}

<body>
<div id="leftnav"></div>
<div id="maintop"></div>
<div id="portfolio">
<ul>
    <li><img src="http://dummyimage.com/400x300/000/fff"></li>
    <li><img src="http://dummyimage.com/400x300/090/fff"></li>
    <li><img src="http://dummyimage.com/400x300/900/fff"></li>
    <li><img src="http://dummyimage.com/400x300/009/fff"></li>
    <li><img src="http://dummyimage.com/400x300/000/fff"></li>
    <li><img src="http://dummyimage.com/400x300/090/fff"></li>
    <li><img src="http://dummyimage.com/400x300/900/fff"></li>
    <li><img src="http://dummyimage.com/400x300/009/fff"></li>
    <li><img src="http://dummyimage.com/400x300/000/fff"></li>
    <li><img src="http://dummyimage.com/400x300/090/fff"></li>
    <li><img src="http://dummyimage.com/400x300/900/fff"></li>
    <li><img src="http://dummyimage.com/400x300/009/fff"></li>
</ul>
</div>
</body>

Upvotes: 3

Views: 130

Answers (3)

NGLN
NGLN

Reputation: 43664

It is from the font size / line height. Either add:

#portfolio li {
  font-size: 0;
}

or:

#portfolio li {
  line-height: 0;
}

Resulting in this updated fiddle.

Upvotes: 3

DnD
DnD

Reputation: 313

Opera browser have not space too. I am checking it in firefox with firebug plugin and I can see height of img is 285px and height of li is 290px. Now when I add height 285px for li, space disappear. 

#portfolio li {
width: 25%;
display: inline-block;
text-align: center;
vertical-align: middle;
margin:0;
padding:0;
float:left;
height: 285px;
}

Upvotes: 0

Chanckjh
Chanckjh

Reputation: 2597

I also don't know where that white space is coming from, but you can set li{ height: 87px; } that will make the white space be gone.

Upvotes: 0

Related Questions