html那些事------------4

让页面随心所欲

所用属性padding、margin、

有基础的朋友不需要往下阅读了，不喜勿喷。

进入正题 ：
    首先看到的页面咱们可以看成一个规定的范围，相当于一个框。
我们先来整个框

<div style='border:1px solid red;height:20px;width:20px;'></div>

这样一个高宽20像素的框就出来了
今天要讲的就是padding与margin

padding

padding是什么呢，有心的可以百度一下，他就是内边距，拿上面的框来更改

<div style='border:1px solid red;height:20px;width:20px;padding:10px;'></div>

现在盒子大小是多少呢？ 高40像素，宽40像素 为什么会是这样？
内边距就是把里面撑大
padding:(顶部，右侧，底部，左侧)；里面如果只写一个值，就会说明是上右下左都是那一个值。

padding:10px 20px;

如果是这样呢？ 高40像素 宽60像素
padding :(顶部，底部) （右侧，左侧）

padding：10px 20px 30px 40px;

高60像素，宽80像素。
当然，padding后也可加单词，精准编写内边距 分别都是

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
   看后缀单词，来识意思。需要自己尝试。

margin

margin相当于外边距
何为外边距，继续那个框举例

<div style='border:1px solid red;height:20px;width:20px;margin:10px;'><div>

现在来看页面自己的框与上部与左部都相隔10像素。但是看自己的框，自己框的大小也没变。
这就是外边距。

外边距与内边距用法一样，不再重复逼逼了。

补充

之前没说css的一个属性 border
看单词大约可以猜出啥意思吧 边，周边
border：线宽 什么线(虚线还是实线) 什么颜色；
感觉好玩就要自己尝试奥

加油相信你自己