CODEWITHSUNDEEP
csspaddingbackground-color
llamagish
llamagish

Reputation: 209

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.

Upvotes: 2

Views: 3429

Answers (3)

Jordan Duran
Jordan Duran

Reputation: 1

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>

Upvotes: 0

Chris Sandvik
Chris Sandvik

Reputation: 1927

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>

Upvotes: 1

Tom Maton
Tom Maton

Reputation: 1594

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>

Upvotes: 2

Related Questions