Я хочу добавить зазор в 100 пикселей между верхней частью черного ящика как для красного, так и для синего ящика. При этом я не хочу вдвигать оба поля (красный и синий) в конец страницы. Я пробовал использовать отступы и поля для обоих полей, но это подтолкнет их вниз. Как «сжать» содержимое красной и синей коробки, не толкая их вниз? Можно ли сгруппировать их обоих в 1 div, а затем использовать CSS для этого div? Если да, то как это сделать?

enter image description here

2
4 Leave Cover 4 Сен 2016 в 18:29

3 ответа

Ключевым моментом является использование border-box и установка padding-top для родительского элемента.

HTML

<div class="black">
  <div class="red"></div><div class="blue"></div>
</div>

CSS

* {
  box-sizing: border-box;
}

.black {
  padding-top: 100px;
  width: 300px;
  height: 300px;
  background-color: black;
}

.red, .blue {
  display: inline-block;
  width: 50%;
  height: 100%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}
2
mrfour 4 Сен 2016 в 15:43

Это потребует небольшого «изменения размера» ваших элементов при наведении курсора. Взгляните на этот фрагмент кода.

* {
  box-sizing: border-box;
}
.parent-div {
  display: flex;
  height: 200px;
  border: 1px solid black;
  background: black;
}
.box1,
.box2 {
  width: 100%;
  border: 3px solid lightblue;
  transition: all 0.3s ease-in;
  background: white;
  margin: 5px;
}
.box1:hover,
.box2:hover {
  margin-top: 100px;
}
<div class="parent-div">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

Вот альтернатива, которую я считаю «круче».

* {
  box-sizing: border-box;
}
.parent-div {
  display: flex;
  height: 200px;
  border: 1px solid black;
  background: #b3ccff;
}
.box1,
.box2 {
  width: 100%;
  border: 3px solid lightblue;
  transition: all 0.3s ease-in;
  background: #00cc66;
  margin: 5px;
}
.box1:hover,
.box2:hover {
  margin-top: 100px;
}
<div class="parent-div">
  <div class="box1"></div>
  <div class="box2"></div>
</div>
1
Yash Jain 4 Сен 2016 в 16:27

Сначала вы можете использовать Flexbox для родительского элемента, а затем вам просто нужно установить box-sizing: border-box и изменить padding-top для родительского элемента.

* {
  box-sizing: border-box;
}
.content {
  display: flex;
  height: 200px;
  border: 1px solid black;
  transition: all 0.3s ease-in;
}
.left,
.right {
  flex: 1;
  border: 3px solid lightblue;
  margin: 5px;
}
.content:hover {
  padding-top: 50px;
}
<div class="content">
  <div class="left"></div>
  <div class="right"></div>
</div>

Вы также можете изменить margin-top в дочерних элементах

* {
  box-sizing: border-box;
}
.content {
  display: flex;
  height: 200px;
  border: 1px solid black;
  background: black;
}
.left,
.right {
  flex: 1;
  border: 3px solid lightblue;
  transition: all 0.3s ease-in;
  background: white;
  margin: 5px;
}
.left:hover,
.right:hover {
  margin-top: 50px;
}
<div class="content">
  <div class="left"></div>
  <div class="right"></div>
</div>
2
Nenad Vracar 4 Сен 2016 в 15:47