gpt4 book ai didi

html - div 内莫名其妙的空间

转载 作者:太空宇宙 更新时间:2023-11-04 03:49:19 25 4
gpt4 key购买 nike

我正在尝试为我的页面制作一个分隔线,使用三个不同颜色的 div 形成一条高度为 2px 的单行。我正在创建一个包含 3 个子 div 的 div,每个子 div 的高度为 2 px。父 div 莫名其妙地占用了 18px 的空间,我认为父 div 应该只占用他的 child 的空间。

这是我的 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

最佳答案

您的问题是因为您使用的是内联 block ,所以分隔符 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

关于html - div 内莫名其妙的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23628367/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com