gpt4 book ai didi

html - span/div block 之间的边距未设置为 0px

转载 作者:行者123 更新时间:2023-11-28 15:54:00 24 4
gpt4 key购买 nike

我有一些 span/div block 定义了宽度和高度并将显示设置为 inline-block 但这些 block 之间有一些间隙所以我使用了 margin:0px; 但仍然存在差距,我必须使用负边距值来消除该差距。这是我正在使用的代码

//HTML SPAN BLOCKS//
<body>
<span class="pro" id="1"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
</body>

//CSS//

body{margin:0px;}
.pro{
width:300px;
height:300px;
display:inline-block;
border:1px solid #FF0004;
margin:0px;
padding:0px;
}
#1{
background:#FF0004;
}

我正在给背景提供 ID,但它不起作用。跨度 block 之间的边距在 Internet Explorer 中为 0(当设置为 0 时)。

JSFIDDLE

当我在这些标签中添加一些内容(文本)时,整个布局都乱七八糟。所有方 block 从其位置上下移动

最佳答案

inline-block 元素之间的空格是由父元素的 font-size 引起的,在您的例子中是 BODY 元素。要解决此问题,请将父元素的 font-size 设置为 0,然后在 .pro 中定义新的 font-size > 元素。

这是通过使用 .clearGaps 容器包装内容而不影响 body 元素的 font-size 的解决方案。

https://jsfiddle.net/jrv4zp5d/1/

html:

<div class="clearGaps">
<span class="pro" id="1"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
</div>

CSS:

body{
margin: 0px;
}
.clearGaps {
font-size: 0;
}
.pro{
width:300px;
height:300px;
display:inline-block;
border:1px solid #FF0004;
font-size: 12px; /* restore font size after clearing gaps */
}
#1{
background:#FF0004;
}

祝你好运

关于html - span/div block 之间的边距未设置为 0px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32338599/

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