div调整大小而不推送内容

Question

我想在红色和蓝色框的黑盒子顶部之间添加100px间隙。 同时我不想将两个框（红色和蓝色）推到页面底部。我尝试使用两个方框的填充和边距，但它会将它们向下推。如何“挤压”红色和蓝色盒子的内容而不必将它们向下推？是否可以将它们分成1个div然后在该div上使用CSS？如果是这样怎么办？

Answer 1

你可以试试像：

.black-box{
  padding-top: 100px;
}

对于你的红/蓝div：

.red, .blue {
   height: calc(100% - 100px);
}

但这取决于您当前的代码。如果你有两个彩色div的绝对位置，或者显示：inline-block。它可以工作。

Answer 2

首先，您可以在父元素上使用Flexbox，然后您只需要在父元素上设置box-sizing: border-box并更改padding-top。

＆＃13;

＆＃13;

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

＆＃13;

<div class="content">
  <div class="left"></div>
  <div class="right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

您还可以更改子元素上的margin-top

＆＃13;

＆＃13;

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

＆＃13;

<div class="content">
  <div class="left"></div>
  <div class="right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 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;
}

Answer 4

这需要一点点＆＃34;调整大小＆＃34;你的元素悬停。看一下这段代码片段。

＆＃13;

＆＃13;

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

＆＃13;

<div class="parent-div">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我认为这是一种替代方案，它看起来更酷，而且＃34;。

＆＃13;

＆＃13;

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

＆＃13;

<div class="parent-div">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;