Применение цвета фона дочернего элемента к отступам родителя - PullRequest
Новая
       41

Применение цвета фона дочернего элемента к отступам родителя

1 голос
/ 24 июня 2019

В основном я пытаюсь добиться этого: enter image description here

Но в настоящее время я имею дело с этим: enter image description here

Я хочу заполнить родительский элемент элемента.Но застрял на том, как это сделать.

Вот мой 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>

Любой совет с благодарностью.Спасибо.

Ответы [ 2 ]

2 голосов
/ 24 июня 2019

Попробуйте поменять в х4

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>
1 голос
/ 24 июня 2019

На мой взгляд, лучший способ справиться с этой проблемой - не допустить, чтобы это произошло в первую очередь. Лучше избегать работы с отрицательными полями, если они не нужны, поскольку они делают ваш код запутанным.

Я рекомендую вместо того, чтобы добавлять заполнение к самой форме, разделить форму на заголовок и раздел тела и обработать их значения по отдельности. Таким образом, структура вашего 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>
...