'Applying child element background color to parent's padding

Basically I'm trying to achieve this: enter image description here

But I'm currently dealing with this: enter image description here

I want to fill the element's parents padding. But stuck on how to do so.

Here's my HTML and 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>

Any advice is greatly appreciated. Thank you.

csspaddingbackground-color


Solution 1:[1]

In my opinion, the best way to deal with this problem is to not have it happen in the first place. It is better to avoid dealing with negative margins if they're not necessary as they make your code confusing.

My recommendation is instead of adding padding to the form itself, section your form off into a header and body section and handle their padding values individually. That way, structure of your css makes a bit more sense.

.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>

Solution 2:[2]

Try changing in the h4

margin-bottom: 20px;

to

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

This should negate the 15px padding on the parent wrapper

.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>

Solution 3:[3]

Try this:

  • Apply border-radius to header div

  • Create empty div that will fill in the bottom left/right corners of the header and will also leave the bottom of the header straight.

* {
  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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chris Sandvik
Solution 2 Tom Maton
Solution 3 Jordan Duran

Related Questions