Question

简短问题：点击下面的第一个链接，然后向我解释为什么Chrome会在右边显示边距，如果没有则显示。

长问题：

我想了解为什么Google Chrome会显示来自绝对和相对位置块的不同图形表示。

在绝对定位的区块中，Chrome会按照我预期的方式显示元素。

在相对定位的块上，元素的宽度显示更多内容。它看起来像是一些边距或填充，但是我将此div中的填充和边距归零，并且在Chrome Inspect Tools上看起来仍然相同。

看看相对div的宽度是否有“扩展”。

inspected relative div screenshot

在这里，绝对div没有这个“扩展”。

inspected absolute div screenshot

这是一个可以证明这一点的代码。

.wrapper {
  border: solid 1px red;
  display: block;
  width: 300px;
  position: relative;
  height: 150px;
}

.absolute-class, .relative-class {
display: block;
width: 100px;
left: 20px;
font-size: 24px;
}

.absolute-class {
position: absolute;
top: 10px;
}

.relative-class {
position: relative;
top: 30px;
}

<body>
    <div class="wrapper">
        <div class="absolute-class">Text 1</div>
        <div class="relative-class">Text 2</div>
    </div>
</body>

我很担心这个，因为我认为这个额外的“边距”导致我正在开发的页面上水平滚动。所以我想了解这是什么，以便能够解决这个问题。

Answer 1

这超出了div，因为你给left:20px并设置了固定的宽度，所以left会将你的div推到包装div之外。使用padding-left:20px;

＆＃13;

.wrapper {
  border: solid 1px red;
  display: block;
  width: 300px;
  position: relative;
  height: 150px;
}

.absolute-class, .relative-class {
display: block;
width: 100px;
padding-left: 20px;
font-size: 24px;
}

.absolute-class {
position: absolute;
top: 10px;
}

.relative-class {
position: relative;
top: 30px;
display: inline-block;
}

＆＃13;

<body>
    <div class="wrapper">
        <div class="absolute-class">Text 1</div>
        <div class="relative-class">Text 2</div>
    </div>
</body>

＆＃13;

或者您也可以在display: inline-block;

中使用.relative-class

＆＃13;

.wrapper {
  border: solid 1px red;
  display: block;
  width: 300px;
  position: relative;
  height: 150px;
}

.absolute-class, .relative-class {
display: block;
width: 100px;
left: 20px;
font-size: 24px;
}

.absolute-class {
position: absolute;
top: 10px;
}

.relative-class {
position: relative;
top: 30px;
display: inline-block;
}

＆＃13;

<body>
    <div class="wrapper">
        <div class="absolute-class">Text 1</div>
        <div class="relative-class">Text 2</div>
    </div>
</body>

＆＃13;

相对定位块显示不存在右边距

1 个答案: