Question

我试图为我的页面制作一个分隔符，使用不同颜色的三个div来形成一条高度为2px的单行。我正在创建一个包含3个子区域的div，每个区域的高度为2像素。父级div莫名其妙地占据了18px的空间，我认为父级div应该只占用他孩子的空间。

这是我的HTML代码：

<!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>

我的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;  
}

以下是我的代码的codepen.io链接：

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

Answer 1

您的问题是因为您使用内联块，分隔符div使用字体大小来确定它的高度和子元素的行高。

首先，您需要注释掉所有空格（因为display:inline-block会将元素视为句子中的单词，因此会在它们之间显示空白区域）：

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

然后您需要将以下样式添加到分隔符div：

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

Example

Answer 2

JsFiddle

只需将float:left;添加到.third课程即可。这是摆脱display:inline-block创造的空间的一种方法。我还删除了margin-top:-10px（否则你看不到元素）

<强>之前

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

<强>后

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

记住：浮动元素需要父级overflow:hidden或元素clear:both。

div里面莫名其妙的空间

2 个答案: