今天画个丑丑的图片来介绍内边距(padding) 边框(border) 外边距(margin)

这张图 把红色框起来的部分当作内容物 通常是文字
那麽黑色框起来的部分就把内容物这个容器给框起来 所以黑框就是边框
红色的箭头就是内边距 他是指边框到内容物的距离
黑色的箭头就是外边界 他是指边框到周围环境的距离

有了概念之後就可以懂它的语法了

padding

• padding-top (上留白)
• padding-right (右留白)
• padding-bottom (下留白)
• padding-left (左留白)

margin

• margin-top (上边界)
• margin-right (右边界)
• margin-bottom (下边界)
• margin-left (左边界)

它们可以使用的距离单位可以使用长度(em、px、pt等)、百分比(%)、以及自动分配(auto)

padding和margin也可以有便利一点的写法来给他距离
像是
padding: 25px 50px; "上下 左右"
padding: 25px 50px 25px; "上 左右 下"
padding: 25px 50px 50px 25px; "上 右 下 左"
记下起来这些简写可以省略一些冗长的程序码