CSS 盒子模型

盒子模型涉及到元素的内容、padding（内边距）、margin（外边距）、border、outline。

实例解析

div{
	width: 100px;height: 100px;
	background-color: #5F9EA0; 
	padding: 30px;
	border: 40px solid #ddd;
	margin: 50px;
	outline: 10px solid #D2691E;
}

css_box_1.png

图1

css_box_2.png

图2
  • width: 100px;height: 100px; 是设置元素的content
  • 元素实际的宽度 = content 的 width + padding，也就是 160px（100px + 30px * 2）, 所以padding的背景色为元素的背景色
  • border 介于 padding 和 margin 之间，不计算在元素实际的宽度内
  • 从图1中可以看出，outline 不占用实质空间。图2中看出，outline 位于 border 外围。