CSS, как переопределить дочернее поле с родительским отступом? - PullRequest
Новая
       16

CSS, как переопределить дочернее поле с родительским отступом?

2 голосов
/ 16 апреля 2019

Можете ли вы как-нибудь отключить поле дочернего элемента, которое касается родительского контейнера?

Например, у меня есть 4 div с полем, равным 20 px, в одной строке в div с отступом 10 px.Может ли первый и последний div не использовать левое или правое поле?

что я хочу: 10px [div] 40px [div] 40px [div] 40px [div] 10px

вместо: 30px[div] 40px [div] 40px [div] 40px [div] 30px

html 

<div class='parent'>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
</div>

css 

.parent{
   display: flex;
   padding: 10px;
}
.child{
   maring 20px;
   width: 100px;
   height: 100px;
}

Редактировать: Как насчет того, чтобы иметь больше строкесть ли такие div'ы, есть ли простой способ заставить каждый первый и последний div вести себя таким образом?

Ответы [ 5 ]

1 голос
/ 16 апреля 2019

Вы можете использовать псевдо-селекторы css: first-child и: last-child, чтобы удалить поля для этих элементов.Обратите внимание, что я добавил границы для отображения элементов. 

.parent{
   display: flex;
   padding: 10px;
   border: solid 1px red;
}
.child{
   margin: 20px;
   width: 100px;
   height: 100px;
   border: solid 1px blue;
}
.child:first-child {
 margin-left: 0;
}
.child:last-child {
 margin-right: 0;
}
<div class='parent'>
   <div class='child'>test 1</div>
   <div class='child'>test 2</div>
   <div class='child'>test 3</div>
   <div class='child'>test 4</div>
</div>

В качестве альтернативы - вы можете использовать братский комбинатор для добавления полей между соседними элементами .child 

.parent{
   display: flex;
   padding: 10px;
   border: solid 1px red;
}
.child{
   margin: 20px 0;
   width: 100px;
   height: 100px;
   border: solid 1px blue;
}

.child + .child{
 margin-left: 40px;
}
<div class='parent'>
   <div class='child'>test 1</div>
   <div class='child'>test 2</div>
   <div class='child'>test 3</div>
   <div class='child'>test 4</div>
</div>
0 голосов
/ 16 апреля 2019

Все, что вам нужно, зависит от: псевдо-селекторов css first-child для удаления поля из первого элемента. 

.parent{display: flex; padding: 10px; border:solid 1px red;}
.parent .child{margin:20px 0px 20px 40px; width: 100px; height: 100px; border:solid 1px green;}
.parent .child:first-child{margin-left:0;}
<div class='parent'>
   <div class='child'>h</div>
   <div class='child'>1</div>
   <div class='child'>2</div>
   <div class='child'>3</div>
</div>
0 голосов
/ 16 апреля 2019

Вы просто используете .child: first-child и .child: last-child псевдо-селектор 

.parent{
      display: flex;
      padding: 10px;
      }
    .child{
      margin: 20px;
      width: 100px;
      height: 100px;
    }
    .child:first-child {
      margin-left: 0;
    }
    .child:last-child {
      margin-right: 0;
    }
<div class='parent'>
        <div class='child'>dfgdfg</div>
        <div class='child'>dfgdfg</div>
        <div class='child'>dfgdfg</div>
        <div class='child'>dgfdg</div>
     </div>
0 голосов
/ 16 апреля 2019

Это больше подходит для CSS-сетки, где вы можете рассмотреть пробелы: 

.parent{
   display: grid;
   grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
   grid-column-gap:40px;
   padding:10px;
   border:1px solid;
}
.child{
   height: 100px;
   background:red;
}
<div class='parent'>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
</div>
0 голосов
/ 16 апреля 2019

Вы можете связать псевдокласс с цепочкой и включить левый и правый margin для каждого другого соответствующего дочернего элемента.

Обновление

Если я не понял вас неправильно, CSS, который я уже написал, будет работать с n родительскими / дочерними парами. Я добавил еще несколько пар родитель / потомок, чтобы показать вам, что он работает, как описано. 

.parent {
  display: flex;
  padding: 10px;
}

.child {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100px;
  height: 100px;
}

.child:not(:first-child):not(:last-child) {
  margin-left: 20px;
  margin-right: 20px;
}
<div class='parent'>
  <div class='child'>1</div>
  <div class='child'>2</div>
  <div class='child'>3</div>
  <div class='child'>4</div>
</div>

<div class='parent'>
  <div class='child'>1</div>
  <div class='child'>2</div>
  <div class='child'>3</div>
  <div class='child'>4</div>
</div>

<div class='parent'>
  <div class='child'>1</div>
  <div class='child'>2</div>
  <div class='child'>3</div>
  <div class='child'>4</div>
</div>
...