时间戳

首页 > 解决方案 > 如何在没有间距的情况下定位 div 块

html - 如何在没有间距的情况下定位 div 块

问题描述

我遇到了一个奇怪的嵌套行为，div-blocks想知道如何从逻辑上解释，如何避免。

我的最小化HTML演示行为如下：

body{
    padding: 0px;
    margin: 0px;
    background-color:gray;
}
#block1 {
    height: 70vh;
    width: 100vw;
    position: fixed;
    top: 0px;
    padding: 0px;
    margin: 0px;
    background-color:cyan;
    display: inline-block;
}
#block2{
  height:40%;
  background-color:green;
  /* the following lines actually have no effect
  padding: 0px;
  margin: 0px;
  position: relative;
  top:0;
  */
}
#block3{
  background-color:yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demonstrate Strange CSS Behavior</title>
</head>
<body>
<div id="block1">
    <div id="block2">
        <div  id="block3">Hello!</div>
    </div>
</div>
<!-- This html will add a space between block1 and block2
<div id="block1">
    <div id="block2">
        <div  id="block3"><span><p>Hello!</p></span></div>
    </div>
</div>
-->
<!-- This simple space will remove it again
<div id="block1">
    <div id="block2">&nbsp;
        <div  id="block3"><span><p>Hello!</p></span></div>
    </div>
</div>
-->
</body>
</html>

因为没有填充和边距，这些div块整齐地相互重叠。 使用 JSFiddle 进行演示 然而，当 p-tag 包装“Hello！”时 一切都变得奇怪。在块 1 和块 2 之间出现一个大约10px高度的空间。 请参阅此处的 JSFiddle 此行为不会显示在诸如 span 之类的内联标记中，但它会随着任何块子节点重新出现。更奇怪的是，当在 block2 之后添加一个不可破坏的空格时，block1 和 block2 之间的空格就消失了。 在这个 JSFiddle 中查看

如此遥远的孩子如何改变祖父母之间的距离？

更新：研究了类似的 QA 线程和关于CSS Reset的讨论后，我得出的结论是 CSS 边距属性是错误的，最好避免。为了避免此类问题，请使用CSS 重置代码和定位。

标签： htmlcss

解决方案

我相信您正在处理默认浏览器样式。p围绕标签的默认样式问题已经进行了多次讨论，例如这里）

如此遥远的孩子如何改变祖父母之间的距离？

我无法回答这个问题，但我可以建议如何规避这个问题：CSS Reset

推荐阅读