Html 如何创建一个容器，其中div水平和垂直地填充容器（并且在4个边上留有边距）？

这是我能得到的最接近的结果：

*{
框大小：边框框；
}
html，
身体，
主要{
身高：100%；
}
身体{
背景色：#413c32；
颜色：#444；
字体大小：16px；
线高：1.4；
保证金：0；
}
第[_v-F4D9AF6]条{
边缘底部：30px；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
第[_v-e514def2]条{
背景色：#fff；
身高：50%；
边缘顶部：15px；
右边距：15px；
/*边缘底部：15px*/
左边距：15px；
/*位置：绝对位置*/
边界半径：5px；
盒影：02px0rgba（0,0,0,0.05）；
}
第条第2款{
利润率：10px；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

问题 这是由于两个子元素（

article[\u v-e514def2]

）的累积高度将父元素（

article[\u v-f4d9afa6]

）的高度推到所需的水平之上。子元素具有应用于它们的

margin

s和

height

，这实际上意味着它们占据父元素的总高度为50%+50%+margins

决议 要修复此问题，您需要确保总高度

等于
50%
。有两种方法可以实现这一点：

使用计算器
使用
calc
我们可以从
高度中删除
边距顶部
：


*{
框大小：边框框；
}
html，
身体，
主要{
身高：100%；
}
身体{
背景色：#413c32；
颜色：#444；
字体大小：16px；
线高：1.4；
保证金：0；
}
第[_v-F4D9AF6]条{
边缘底部：30px；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
第[_v-e514def2]条{
背景色：#fff；
高度：计算（50%-15px）；
边缘顶部：15px；
右边距：15px；
/*边缘底部：15px*/
左边距：15px；
/*位置：绝对位置*/
边界半径：5px；
盒影：02px0rgba（0,0,0,0.05）；
}
第条第2款{
利润率：10px；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

Flexbox或显示表。@Marcos Pérez Gude能给我举个例子吗？要使用Flexbox，首先需要删除所有样式，然后查看Flexbox教程。要使用显示表格，您需要将
display:table
设置为parent，然后将
display:table cell
设置为childs，通过此模式，所有单元格都会缩小以完全适合您的大小。您的小提琴底部有边距，但您必须滚动。你想要实现什么？底部的边距是否在不滚动的情况下始终可见？这是因为每个“文章”都有50%的高度，所以不考虑边距。但是正如您所看到的，hidden通过使用flexbox为您提供了正确的答案：）@alexchenco在某一点上，子元素的高度受其包含的文本长度的影响。如果添加
overflow-y:hidden或
溢出-y：滚动它应该允许它们崩溃。是的，我刚刚发现了。再次感谢。没问题，很高兴我能帮忙。