子标记是绝对的，其边距左边是从父标记的填充开始的。为什么它的边距从身体开始？

Question

这是来自chrome的保证金范围：

body {
  margin: 0px;
  padding: 20px;
}

.article {
  background-color: #eee;
  padding: 20px;
  border: 2px solid #999;
  overflow: hidden;
}

.left {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 160px;
  padding: 20px;
  border: 2px solid #999;
  background-color: #fff;
}

.right {
  position: absolute;
  top: 40px;
  right: 40px;
  padding: 20px;
  width: 80px;
  background-color: #fff;
  border: 2px solid #999;
}

.middle {
  position: absolute;
  margin-left: 220px;
  margin-right: 180px;
  background-color: #fff;
  border: 2px solid #999;
  padding: 20px;
  word-break: break-all;
}

img {
  width: 80px;
}

<div class="article">
  <div class="left">sldkfjlsj</div>
  <div class="middle">lksdflmsddssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssslksmflmsgmfmg;df;g,df;gl,f;,gd;fl,g;fl,g;ldf,;gldf;mgkdfgdfmgpfmgpsomgpsmgpspgmspmgosmgmspgomsgmspgmspgomspgmpsogflmsldfmsldmflsfm</div>
  <div class="right"><img src="glm.jpg"></div>
</div>

开始我认为原因是父标签的宽度不牢固。我尝试了，但没有效果。然后我尝试设置相对于父标记，边距右边是从身体开始，也不是对称。

Answer 1

你正在混合和匹配。 绝对定位重要的是左，上，右，下，宽度和高度。 但我的猜测是你不需要它。 你想要实现的是.article中间的一列文字，有一些边。

如果你放弃.middle的绝对定位，你几乎可以实现它。 然后它的边距将从你想要的地方开始。而且你将被留下来计算抵消额。

body {margin: 0px; padding:20px; position:relative;}
.article { background-color: #eee; padding:20px; border:2px solid #999; overflow: hidden;}
.left {position: absolute; top:40px; left:40px; width:160px; padding:20px; border: 2px solid #999; background-color: #fff;}
.right {position: absolute; top: 40px; right: 40px; padding: 20px; width: 80px; background-color: #fff; border: 2px solid #999;}
.middle { margin-left: 220px; margin-right: 180px; background-color: #fff; border: 2px solid #999; padding:20px; word-break: break-all;}
img {width:80px;}

<div class = "article">
    <div class = "left">sldkfjlsj</div>
    <div class = "middle">lksdflmsddssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssslksmflmsgmfmg;df;g,df;gl,f;,gd;fl,g;fl,g;ldf,;gldf;mgkdfgdfmgpfmgpsomgpsmgpspgmspmgosmgmspgomsgmspgmspgomspgmpsogflmsldfmsldmflsfm</div>
    <div class="right"><img src="http://lorempixel.com/output/people-h-c-80-120-10.jpg"></div>
</div>

A good article about css positioning