将子元素背景颜色应用于父元素的填充

Question

基本上我正在努力实现这一目标：

但我目前正在处理这个问题：

我想填充元素的父填充。但仍然不知道如何去做。

这是我的 HTML 和 CSS

    .form-group {
        margin: auto;
        width: 50%;
        border: 1px solid lightgrey;
        padding: 15px;
        border-radius: 5px;
    }

    h4 {
        font-weight: 400;
        background-color: #0c234b;
        margin-bottom: 20px;
        color: white;
    }

    <div className="form-group">
        <h4>Contact Information</h4>
    </div>

非常感谢任何建议。谢谢。

Answer 1

尝试更改 h4

margin-bottom: 20px;

到

margin: -15px -15px 20px -15px;

这应该否定父包装器上的 15px 填充

.form-group {
  margin: auto;
  width: 50%;
  border: 1px solid lightgrey;
  padding: 15px;
  border-radius: 5px;
}

h4 {
  font-weight: 400;
  background-color: #0c234b;
  margin: -15px -15px 20px -15px;
  padding: 20px;
  color: white;
}

<div className="form-group">
  <h4>Contact Information</h4>
</div>

Answer 2

在我看来，处理这个问题最好的办法就是一开始就不要让它发生。最好避免处理不必要的负边距，因为它们会使您的代码混乱。

我的建议是不要向表单本身添加填充，而是将表单分成 header 和 body 部分并单独处理它们的填充值。这样，您的 css 结构就更有意义了。

.form {
  margin: auto;
  width: 50%;
  border: 1px solid lightgrey;
  padding: 0;
  border-radius: 5px;
}

.form-header {
  font-weight: 400;
  background-color: #0c234b;
  padding: 20px;
  margin: 0;
  color: white;
}

.form-content {
  padding: 20px;
  padding-bottom: 0px;
}

.form-row {
  margin-bottom: 20px
}

label {
  display: block;
}

<form class="form">
  <h4 class="form-header">Contact Information</h4>
  <div class="form-content">
    <div class="form-row">
      <label>label</label>
      <input type="text" />
    </div>
    <div class="form-row">
      <label>label</label>
      <input type="text" />
    </div>
    <div class="form-row">
      <label>label</label>
      <input type="text" />
    </div>
    <div class="form-row">
      <label>label</label>
      <input type="text" />
    </div>
  </div>
</form>

Answer 3

试试这个：

将border-radius应用到headerdiv
创建空的 div，它将填充 header 的底部 left/right 角，并且还会使 header 的底部笔直.

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  font-size: 12px;
  background-color: slategrey;
  padding: 10px;
}


/* IMPORTANT STYLES BELOW */

.container {
  background-color: ghostwhite;
  margin: 0 auto;
  width: 280px;
  height: 300px;
  border-radius: 5px;
  /* Border Radius on container div */
}

.header {
  background-color: dodgerblue;
  border-radius: 3px;
  /* Border Radius on header div */
  padding: 3px;
}

.header-title {
  text-align: center;
  text-transform: uppercase;
}


/* Backdrop div used to fill in the bottom left/right corners with the header background color */

.backdrop {
  background-color: dodgerblue;
  height: 4px;
  position: relative;
  top: -3px;
}

<div class="container">
  <div class="header">
    <h2 class="header-title">Contact Information</h2>
  </div>
  <!-- Backdrop div used to cover bottom left/right corners of the header with the header background color -->
  <div class="backdrop"></div>
</div>

将子元素背景颜色应用于父元素的填充

Applying child element background color to parent's padding

css

padding

background-color