几个概念带你了解Css的模型构建

"盒子"模型，每一个HTML元素可以看成一个"盒子"。一个"盒子"具有：宽度、边框、内填充、外边距

1.宽度(width)和高度(height)：是指内容的宽度和高度，不含边框、外边距、内填充。

2.内填充(padding)：是指内容到边框线间的距离，含四个方向：上、右、下、左

3.外边距(margin)：是指边框线以外的距离。

计算一个"盒子"的总空度

假设：总宽度为100px，边框为1px，内填充为10px，求内容的宽度

Width = 100px – 1px*2 -10px*2 = 78px

假设：总宽度为100px，内容的宽50px，求左右内填充分别是多少？

Padding-left = (100px – 50px )/2 = 25px

CSS内填充padding

Padding-left：左边线到内容间的距离

Padding-right：右边线到内容间的距离

Padding-top：顶边线到内容间的距离

Padding-bottom：底边线到内容间的距离

Padding：同时设置四个边的内填充距离

padding:10px; //表示：上下左右四个内填充都是10px

padding:5px 10px; //表示：上下为5px，左右为10px

padding:5px 10px 15px; //表示：上为5px，左右为10px，下为15px

padding:5px 10px 15px 20px; //表示：上右下左分别设置不同的内填充，顺序不可乱

CSS外边距margin

Margin-left：左边线以外的距离

Margin-right：右边线以外的距离

Margin-top：顶边线以外的距离

Margin-bottom：底边线以外的距离

Margin:10px; //表示：四个外边距都是10px

Margin:10px 15px; //表示：上下外边为10px，左右外边距为15px

Margin:5px 10px 15px //表示：上外边距为5px，左右外边距为10px，下外边距为15px

Margin:5px 10px 15px 20px; //分别设置四外外边距，顺序为"上右下左"

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！