Question

这是我的 DOM 结构的简化：

.page{
  border: 1px solid black;
}

.parent{
  padding: 50px;
  border: 1px solid blue;
  width: 60%;
  margin: 20px auto;
}

.header{
  border: 1px solid red;
  width: 100%;
  text-align: center;
}

<div class="page">
  <div class="parent">
    <div class="header">this needs to ignore its parent padding</div>
    <div class="content">
      <p>some paragraphs</p>
      <p>some paragraphs</p>
      <p>some paragraphs</p>
      <p>some paragraphs</p>
    </div>
  </div>
</div>

我想要做的就是，红色边框元素忽略蓝色边框元素的 padding。我怎样才能做到这一点？换句话说，红色的必须从上、左、右贴到蓝色。

请注意，我无法更改 HTML。

Answer 1

使用负边距

.page{
  border: 1px solid black;
}

.parent{
  padding: 50px;
  border: 1px solid blue;
  width: 60%;
  margin: 20px auto;
}

.header{
  border: 1px solid red;
  margin:-50px -50px 0;
  text-align: center;
}

<div class="page">
  <div class="parent">
    <div class="header">this needs to ignore its parent padding</div>
    <div class="content">
      <p>some paragraphs</p>
      <p>some paragraphs</p>
      <p>some paragraphs</p>
      <p>some paragraphs</p>
    </div>
  </div>
</div>

Answer 2

给出 .parent 相对位置，然后给出标题绝对位置，top 和 left 设置为零。

.page{
  border: 1px solid black;
}

.parent{
  padding: 50px;
  border: 1px solid blue;
  width: 60%;
  margin: 20px auto;
  position: relative;
}

.header{
  border: 1px solid red;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0; left: 0;
}

<div class="page">
  <div class="parent">
    <div class="header">this needs to ignore its parent padding</div>
    <div class="content">
      <p>some paragraphs</p>
      <p>some paragraphs</p>
      <p>some paragraphs</p>
      <p>some paragraphs</p>
    </div>
  </div>
</div>

Answer 3

标题需要有负边距并失去 100% 的宽度：

.header{
  margin: -50px -50px 0 -50px;
  border: 1px solid red;
  text-align: center;
}

如何使用 CSS 忽略父级的填充？

3 个答案: