是否有可能启用div标签不遵循父div填充？

Question

我为子div定义了这个css样式，我的父div已经设置了填充，所以左边会有一些空格。最后当我插入我的子div并设置下面的属性时，它必须遵循父div的填充。

width: 100%; 
margin-left: 0px; 
padding-left: 0px; 
float: left; 
clip: rect(auto, auto, auto, 0px);
left: 0px;

儿童div是否有可能对父母填充？

Answer 1

您是否尝试使用＆＃34; position：absolute＆＃34;在孩子div？

Answer 2

如果您希望子div不要对其父级进行填充，那么要么不给父级div填充，要么可以设置具有绝对位置的子div。

.child {
  width:inherit;
  clip: rect(auto, auto, auto, 0px);
  border: solid 1px red;
  position:absolute;
  left:-1px;
}
.parent {
   border: solid 1px #cccccc;
   padding-left: 40px;
   float:left;
   width:100%;
   position:relative;
   height:100px;
}

<div class="parent">i am parent<div class="child">i am child</div></div>

Answer 3

如果您知道父div具有的填充量，您可以简单地将其反转：

.padding {     /* child element */
  width: 100%; 
  height:300px;
  margin-left: 50px; 
  padding-left: 50px; 
  background:#000;
}
.padding div {  /* child element */
  position:relative;  /* cling to parent */
  width: 100%;
  height:200px;
  left: -25px;  /* move back to edge of parent*/
  background:#f00;
}

Answer 4

首先，将您的父div设置为position: relative;。

然后将子div设置为position: absolute; - 这会将子div位置设置为相对于具有位置集的DOM层次结构中的下一个元素的绝对值（在这种情况下，它是直接父级）。 FYI position: relative;设置相对于元素渲染位置的位置。 CSS Tricks goes into more detail在某个学习阶段处于良好的水平。

设置子div后，使用top，right，bottom和left属性根据需要定位div。

最后，要抵消填充，您需要直接设置顶部和左侧值。这将抵消孩子加载的默认位置，这将考虑填充。

以下是一个例子：

https://jsfiddle.net/owwcvuhp/7/

这是关键的css：

.parent {
    padding: 50px;
    position: relative; /* makes child element position work */
}

.child {
    position: absolute; /* gives simple control of child position */
    top: 0; /* forces parent padding to be ignored when positioning */
    left: 0; /* as above */
}

您的图片建议您希望将最高值保留为计算值，也许是因为内容会将其推下来，所以这里是一个删除了top: 0;的示例，它显示了孩子尊重它的默认渲染位置，除了左边的价值已经超越了它：

https://jsfiddle.net/owwcvuhp/8/

Answer 5

请使用padding-left：0px！important;它会起作用。