首页 文章

为什么这些内联块div元素之间存在无法解释的差距？

提问于
浏览 次
248

我有两个内联块 div 元素，它们是相同的，位于彼此旁边 . 然而，尽管边距设置为0，但两个div之间似乎有一个4像素的神秘空间 . 没有父div影响它们 - 发生了什么？

CSS

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

Div problem

这就是我想要的样子：

What it SHOULD look like

html css margin padding

6 回答

  • -1

    在这种情况下，您的 div 元素已从 block 级元素更改为 inline 元素 . inline 元素的典型特征是它们尊重标记中的空白 . 这解释了为什么元素之间会产生空隙 . (example)

    有一些解决方案可用于解决此问题 .

    方法1 - 从标记中删除空格

    Example 1 - 评论空白：(example)

    <div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

    Example 2 - 删除换行符：(example)

    <div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

    Example 3 - 在下一行关闭部分标签(example)

    <div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

    Example 4 - 关闭下一行的整个标记：(example)

    <div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

    方法2 - 重置字体大小

    由于 inline 元素之间的空白由 font-size 确定，因此您可以简单地将 font-size 重置为 0 ，从而删除元素之间的空间 .

    只需在父元素上设置 font-size: 0 ，然后为children元素声明一个新的 font-size . 这是有效的，如此处所示(example)

    #parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

    这种方法非常有效，因为如果使用 em 单位声明子元素的 font-size ，它就无法正常工作 . 因此，我建议从标记中删除空格，或者选择floating the elements，从而避免 inline 元素生成的空间 .

    方法3 - 将父元素设置为display：flex

    在某些情况下，您还可以将父元素的 display 设置为 flex . (example)

    这有效地消除了supported browsers中元素之间的空格 . 不要忘记添加适当的供应商前缀以获得额外支持 .

    .parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

    .parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

    <div class="parent">
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
</div>

    侧面说明：

    使用负边距去除 inline 元素之间的空间是非常不可靠的 . 如果有其他更优化的解决方案，请不要使用负边距 .

    回复于
  • 501

    使用 inline-block 允许在HTML中使用空格，这通常等于.25em（或4px） .

    您可以注释掉空白区域，或者更常见的解决方案是将父级的 font-size 设置为0并将其重置为内联块元素上所需的大小 .

    回复于
  • 14

    inline-block 自动设置默认 white-space ，就像每个人都说的那样 . （这是由于元素"inline"属性，与 HTML 标记中的文本字符串中的单词之间的间距相同 . 这就是为什么在标记中删除 white-space 也有效 . ）最简单的解决方法是只对容器进行 float . （例如 float: left; ）另一方面，每个 id 都应该是唯一的，这意味着您不能在同一个 HTML 文档中使用相同的 id 两次 . 您应该使用类，您可以在同一个 class 中使用多个元素 .

    .container {
    display: inline-block;
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;
}
    回复于
  • 32

    找到了一个不涉及Flex的解决方案，因为Flex在较旧的浏览器中不起作用 . 例：

    .container {
    display:block;
    position:relative;
    height:150px;
    width:1024px;
    margin:0 auto;
    padding:0px;
    border:0px;
    background:#ececec;
    margin-bottom:10px;
    text-align:justify;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:0pt;
    letter-spacing:-1em;
}

.cols {
    display:inline-block;
    position:relative;
    width:32%;
    height:100%;
    margin:0 auto;
    margin-right:2%;
    border:0px;
    background:lightgreen;  
    box-sizing:border-box;
    padding:10px;
    font-size:10pt;
    letter-spacing:normal;
}

.cols:last-child {
    margin-right:0;
}
    回复于
  • 0

    只需添加边框： 2px solid #e60000 ;到你的第二个div标签CSS .

    绝对有效

    #Div2Id {
    border: 2px solid #e60000; --> color is your preference
}
    回复于
  • 1

    你需要添加

    #container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
    margin-right:-4px;
}

    因为每当你写 display:inline-block 它需要一个额外的 margin-right:4px . 所以，你需要删除它 .

    回复于

相关问题