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

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

我认为，解决此问题的最佳方法是一开始就不要发生它。最好避免使用不必要的负边距，因为它们会使您的代码混乱。

我的建议是不要在表单本身中添加填充，而是将表单分为标题和正文部分，并分别处理其填充值。这样，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>