父容器就是用来包含目标元素的容器,相反,子元素就是在目标元素内的,父子是一个相对的概念
比如
<div><p></p>
</div>
根据上面的代码p元素就是div的子元素,div就是p的父容器
padding-top 和 padding-bottom 属性分别表示容器的上内边距与下内边距。虽然设置的是垂直方向的高度,有意思的是当该值为一个百分比的时候表示的是和本身包含的元素的宽度有关。
换句话就是说, padding-top 和 padding-bottom 的值为百分比时,其实表示的是其元素宽度的百分比。
因此,在容器宽度不确定的情况下(如: 80% , flex: 1 等),保持容器宽高比不变,可以通过设置元素的 padding-top 或 padding-bottom 值。
例如,保持宽高比为16:9:
这个在保持图片的宽高比时非常有用。
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:.sub{margin-top: 30px}。
3、浏览器运行index.html页面,此时3个div子子容器的垂直间距被统一设置为了30px。