CODEWITHSUNDEEP
htmlcss
Dharman
Dharman

Reputation: 33395

Where do these white lines come from?

Have a look at this link: LINK

As you can see it's a matrix of red divs 20x20(px) in size each. THere should be no space between them but there are white lines between rows. I pressume it's because I used display:inilne-block;. Is there any other way to do this? Why do they appear there in a first place?

.red {
    background: none repeat scroll 0 0 red;
    border: 0 none;
    display: inline-block;
    height: 20px;
    line-height: 0;
    margin: 0;
    outline: 0 none;
    padding: 0;
    width: 20px;
}

Upvotes: 0

Views: 87

Answers (2)

CherryFlavourPez
CherryFlavourPez

Reputation: 7497

Using float will work, because declaring that also silently sets the display property to block (see image below from the Chrome inspector:

Chrome inspector

The gap you're seeing is because you are using inline-block. It is (I believe) the space reserved for descenders on letters such as 'p' and 'q'. The key is the vertical-align property, which by default is set to baseline. If you set that to something else (top, bottom), then the gap will be removed (see this fiddle).

So, use float if that suits your purposes, but if you need the other benefits of inline-block, then use that with a declared vertical alignment.

Upvotes: 2

csaron92
csaron92

Reputation: 1045

Try this: 

background: none repeat scroll 0 0 #F00;
border: 0 none;
display: block;
height: 20px;
line-height: 0;
margin: 0;
outline: 0 none;
padding: 0;
width: 20px;
float: left;

Change the display attr. to block and float to left!

Upvotes: 0

Related Questions