CODEWITHSUNDEEP
htmlcss
Radu
Radu

Reputation: 524

inexplicable space inside div

I'm trying to make a divider for my page, usign three divs with different colors to form a single line with a height of 2px. I am creating a div with 3 subdivs, each with a height of 2 px.The parent div is inexplicably taking a space of 18px, I thought the parent div should only occupy the space of his children.

Here is my HTML code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="margin: 0; padding: 0">
    <div class="separator">
        <span class="third t1"></span><!--
        --><div class="third t2"></div><!--
        --><div class="third t3"></div>
    </div>      
</body>
</html>

And my CSS:

.separator {
    height: 2px;
    width: 100%;        
}   

.third {
    height: 2px;
    margin-top: -10px;
    width: 33.33%;
    display: inline-block;
}

.t1 {
    background-color: #ff7474;  
}

.t2 {
    background-color: #f1f58d;  
}

.t3 {
    background-color: #72baf1;  
}

Here is the codepen.io link for my code:

http://codepen.io/anon/pen/vjdnx

Upvotes: 0

Views: 121

Answers (2)

Pete
Pete

Reputation: 58422

Your problem is that because you are using inline block the separator div is using the font size to determine it's height and the line-height of the child elements.

First you need to comment out all of the white space (as display:inline-block will treat the elements like words in a sentence so white spaces will show up between them):

<div class="separator"><!--
    --><span class="third t1"></span><!--
    --><div class="third t2"></div><!--
    --><div class="third t3"></div><!--
--></div>

then you need to add the following style to your separator div:

.separator {
    height: 2px;
    width: 100%;    
    font-size:2px;
}

Example

Upvotes: 2

Kevin Cittadini
Kevin Cittadini

Reputation: 1469

JsFiddle

Just add float:left; to .third class. It's one way to get rid of the space that display:inline-block creates. I've also removed margin-top:-10px (else you cannot see the elements)

Before

.third {
   height: 2px;
   margin-top: -10px;
   width: 33.33%;
   display: inline-block;
}

After

.third {
   float:left;
   height: 2px;
   width: 33.33%;
   display: inline-block;
}

Remeber : Floating elements needs a parent with overflow:hidden or an element with clear:both after them.

Upvotes: 0

Related Questions