简短问题:点击下面的第一个链接，向我解释为什么 Chrome 会在右侧显示边距(如果没有的话)。
长问题:
我想了解为什么 Google Chrome 显示绝对和相对定位 block 的不同图形表示。
在绝对定位 block 上，Chrome 以我预期的方式显示元素。
在相对定位 block 上，元素的宽度显示更多内容。它看起来像一些边距或填充，但我将此 div 的填充和边距归零，它在 Chrome 检查工具上看起来仍然相同。
看看相对的 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>我对此很担心，因为我认为这个额外的“边距”会导致我正在开发的页面出现水平滚动。所以我想了解这是什么，以便能够解决这个问题。
最佳答案
这超出了 div，因为您给 left:20px 并设置了固定宽度，所以 left 会将您的 div 推到包装 div 之外。使用 padding-left:20px;
.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;
}<body>
<div class="wrapper">
<div class="absolute-class">Text 1</div>
<div class="relative-class">Text 2</div>
</div>
</body>或者你也可以在.relative-class中使用display: inline-block;
.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;
}<body>
<div class="wrapper">
<div class="absolute-class">Text 1</div>
<div class="relative-class">Text 2</div>
</div>
</body>关于html - 相对定位 block 显示不存在的右边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45250668/