CSS 内外边距
padding 内边距
padding 属性用来指定元素的内容与元素边框之间的空隙。
padding 属性的单位通常是像素，也可以是EM和百分比。
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。如果使用百分比，内边距就是浏览器窗口的一个百分比。
如果一个盒子的宽度已经指定，后面再添加内边距，原来盒子的整体大小会增大。
如下面的示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | < html lang = "en" > < head > < meta charset = "UTF-8" > < title >内边距padding</ title > < style > p{ width:300px; border:2px solid #333; } p.one{ padding:10px; } </ style > </ head > < body > < p >学编程，上利永贞网</ p > < p class = "one" >study hard, improve every day</ p > </ body > </ html > |
study hard, improve every day 这段话内边距加大后，整个盒子增大了。
计算结果：
内边距还有4个方向的属性，分别指明4个内边。
- padding-top
- padding-right
- padding-bottom
- padding-left
这样排序的序列是因为padding属性的快捷试写法指定的值是按这样的序列的。
分别为4个内边距设置不同的数值，可以做不不规则的外观。
示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >不规则内边距padding</ title > < style > p{ width:300px; border:2px solid #333; } p.one{ padding-top:20px; padding-right:30px; padding-bottom:10px; padding-left:50px; } </ style > </ head > < body > < p >学编程，上利永贞网</ p > < p class = "one" >study hard, improve every day</ p > </ body > </ html > |
计算结果：
margin 外边距
margin 属性用盒子之间的空隙。
margin 属性的单位通常是像素，也可以是EM和百分比。
如果使用百分比，外边距就是浏览器窗口的一个百分比。
如果一个盒子的宽度已经指定，后面再添加外边距，原来盒子的整体大小会增大。
两个一样大小的盒子，有外边距的盒子会多出空隙。
示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >外边距margin</ title > < style > p{ width:300px; border:2px solid #333; padding:10px; } p.one{ margin:10px; } </ style > </ head > < body > < p >学编程，上利永贞网</ p > < p class = "one" >study hard, improve every day</ p > </ body > </ html > |
计算结果：
下面的盒子有外边，上面的盒子没有外边，放在一起就产生了折叠效果。
外边距在页面排版细节处理上特别有用，如一点细微调整、对齐等。
外边距还有4个方向的属性，分别指明4个外边。
- margin-top
- margin-right
- margin-bottom
- margin-left
这样排序的序列是因为margin属性的快捷试写法指定的值是按这样的序列的。
分别为4个外边距设置不同的数值，可以做不不规则的外观。
示例，略，同学们可以尝试下。
内容居中
居中是排版中常见的需求，有文本居中对齐，盒子居中对齐。
盒子居中对齐很简单，只要将margin-left和margin-rigth的值设置为auto即可。
如果要盒子在页面中居中，需要为盒子指定一个宽度。
示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >盒子居中</ title > < style > p{ width:300px; border:2px solid #333; padding:10px; margin-top:100px; margin-left:auto; margin-right:auto; } </ style > </ head > < body > < p >学编程，上利永贞网</ p > </ body > </ html > |
计算结果：
内联元素与块级元素的转换
块级元素：块元素换行显示，它的实例包括<h1>~<h6>、<p>和<div>元素等。
内联元素：内联元素流动于文本中并且不会换行，它的实例包括<b>、<i>、<img>、<em>和<span>
内联元素和块级元素之间可以相互转换。关键技术使用dispaly属性。display属性的值有：
- inline 将一个块级元素的外观像内联元素一样。
- block 将一个内联元素的外观像块级元素一样。
- inline-block 可以让一个块级元素像内联元素一样浮动，并保持其它的块级元素特征。
- none 将一个元素从页面上隐藏。
内联元素与块级元素之间的转换，最典型的应用是菜单，如：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >块级元素转内联元素实现菜单</ title > < style > li{ display:inline; margin-right:10px; } li.one{ display:none; } </ style > </ head > < body > < ul > < li >首页</ li > < li >HTML</ li > < li >CSS</ li > < li class = "one" >Java</ li > < li >关于</ li > </ ul > </ body > </ html > |
计算结果：
而使用none值的<li>没有显示。
隐藏盒子
visibility属性可让盒子隐藏，它有两个值：
hidden隐藏元素，隐藏后，它的位置会显示空白，仍然点个位置。
visible显示元素。
示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >隐藏元素</ title > < style > li{ display:inline; margin-right:10px; } li.one{ visibility:hidden; } </ style > </ head > < body > < ul > < li >首页</ li > < li >HTML</ li > < li >CSS</ li > < li class = "one" >Java</ li > < li >关于</ li > </ ul > </ body > </ html > |
计算结果：
