细说padding与margin：盒模型--宽度和高度

《细说padding与margin：盒模型--宽度和高度》正文开始，本次阅读大概4分钟。

细说padding与margin

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的高度也是同理。

比如：

css代码：

div{
width:200px;
padding:20px;
border:1pxsolidred;
margin:10px;
}

html代码：

body
div文本内容/div
/body

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：

与padding相关文章：

1、padding和box-sizing:border-box; 外边距变内边距、外边框变为内边框