父元素上的css填充会移动子元素的位置

现在我完全糊涂了。 我已经创建了一个嵌套在父div中的小箭头（带有css），它隐藏了溢出，并考虑将箭头在其父div的鼠标上方稍微向外移动。 父元素是水平居中的，并且出于（某些其他）原因，它具有绝对位置

html:

结果:

嗯。现在我希望父对象的鼠标悬停区域向两侧延伸一点。我想，好吧，用些填充物。所以我改变了父母的想法：

#arrowContainer {
    position: absolute;
    height: 54px;
    width: 13px;
    bottom: 4.2%;
    left: 50%;

    margin-left: -32px;
    padding: 0 24px;

    overflow: hidden;
    cursor: pointer;    
}

这会导致更意想不到的结果：

1） 不仅我必须在一个新的左边距值中遇到填充，而且好的，不难做到

2） 但为什么我的孩子的右边：-4px值是相对于填充物的右边定位的，而不再是它的父对象的可见区域（蓝色）

嗯。我知道我可以使用另一个容器来修复这两个问题。但这我不想要！必须有一个常规的方法来解决这个问题，只有2个div。 我犯了什么错？非常感谢

但为什么我的孩子有权：-4px值被定位 相对于填充的右侧，而不是可见区域（蓝色） 它的父母再也没有了

不幸的是，填充就是这样工作的。填充会在元素内部添加空间，从而移动相对定位元素的外边缘

但有一个解决办法。使用边距来定位元素，而不是使用上、下、左、右

当您添加位置为：绝对的元素时在不设置任何顶部、左侧、右侧或底部位置的情况下，元件将脱离正常流量。如果随后通过修改其边距对其进行定位，则不会受到填充的影响

JSBin：

HTML:

---

在箭头的定位中尝试

right:20px

。#箭头容器{padding:0 24px；}，这会将箭头向右推得太多，请尝试使用边距。这里有一个JSFIDLE就好了。试着删除

对：-4px

谢谢大家！我看到填充物把cild推到了右边。我的问题是：为什么？？我一直认为right指的是div的右边框，而不是它的填充边。当不能以这种方式使用时，填充有什么意义呢？填充也被认为是

宽度

和

高度

例如，如果设置一个div的宽度并将填充添加到宽度中，则宽度将增加AH。我一直认为填充是在元素之外添加的。奇怪。是时候学习了！谢谢你们的小提琴！我觉得这里需要的是一种外部边界。也许在这个方向上也有一个解决方案（保持顶部、底部、左侧、右侧…），但到目前为止，非常感谢大家！

#arrowContainer {
    position: absolute;
    height: 54px;
    width: 13px;
    bottom: 4.2%;
    left: 50%;
    margin-left: -9px;
    overflow: hidden;
    cursor: pointer;    
}

.arrow_left {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    top: 10px;
    right: -4px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 13px solid #fff;
    opacity: 0.72;
}

#arrowContainer {
    position: absolute;
    height: 54px;
    width: 13px;
    bottom: 4.2%;
    left: 50%;

    margin-left: -32px;
    padding: 0 24px;

    overflow: hidden;
    cursor: pointer;    
}

<div class ="container">
    <div class="element"></div>
</div>

.container {
  position:relative;
  width:20px;
  height:100px;
  background-color:#CCC;
  padding:0 40px;  
}

.element {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color:red;

    margin: 40px 0 0 5px;
}