框模型-外边距与内边距

什么是框模型？

框模型定义了元素框处理元素内容、内边距、边框和外边距的方式

• 在网页上的元素基本都是使用div或者span布局，所有的元素都是矩形方式
• 矩形矩形方式的元素具有几个属性，宽高，边框等

常用属性

• width宽度，表示框模型的宽度
• height表示高度，表示框模型的高度

实际框的宽度

• 实际宽度是左右外边距加左右内边距加内容宽度和边框宽度

什么是外边距？

外边距是元素框周围的空白区域，使用外边距的时候会在周围创建一圈空白区域；外边距是透明的

• 标签：margin

使用方式

• 简单使用方式：margin：上 右 下 左
• 三值使用方式：margin：左 上下 右
• 两值使用方式：margin:上下 左右
• 一值使用方式：margin；上下左右

专一使用方式

• margin-top:value表示上边距
• margin-left:value表示是左边距
• margin-right:value表示是右边距
• margin-bottom:value表示是下边距

常用方式

常用margin： 0 auto方式使得本元素框在父元素框中水平居中

注意

margin的方式在垂直方向上的额两个兄弟元素的外边距相邻的会出现合并现象，会在俩个中取值较大的一个

什么是内边距？

标签padding

内边距是和外边距相对的指的是元素内的到元素内容的之间的空白区域

使用方式

简单使用方式

• padding:value
• padidng:value value
• padding:value value value
• padding:value value value value

专一使用方式

• padding-top:value
• padding-left:value
• padding-right:value
• padding-bottom:value

使用内外边距都容易扩大原本的边框的大小