- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>54-清空默认边距</title>
- <style>
- body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
- margin:0;padding:0
- }
- p{
- width: 610px;
- height: 110px;
- background-color: #cdcdcd;
- border: 1px solid #000000;
- }
- div{
- box-sizing: border-box;
- width: 100px;
- height: 80px;
- border: 1px solid #000;
- line-height: 20px;
- /*line-height: 80px;*/
- padding-top:20px;
- padding-bottom:20px;
- }
- </style>
- </head>
- <body>
- <!--
- 1.什么是行高?
- 在CSS中所有的行都有自己的行高
- 注意点:
- 行高和盒子高不是同一个概念
- 行高指的是每行内容的高度
- 盒子高指的是元素的高度
- 规律:
- 1.文字在行高中默认是垂直居中的
- 2.在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的
- 简而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的"行高等于盒子的高"即可
- 3.在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中
- -->
- <!--<p>葬爱:非主流文化的常用词,是当今网络流行术语.且流行于非主流杀马特之中。葬,即埋葬,爱,即爱情,翻译成外语就bury love</p>-->
- <!--<div>我是文字我是文字我是文字</div>-->
- <!--<div>我是文字</div>-->
- <div>我是文字我是文字我是文字</div>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-1987859.html