line-height最详解（记住,文字是在行高中垂直居中的,顶部的内边距是边框到行高顶部的距离哈)

贵哥的编程之路

发布于 2020-11-03 14:27:12

1.4K0

发布于 2020-11-03 14:27:12

文章被收录于专栏：用户7873631的专栏用户7873631的专栏

line-height

注意点： 行高和盒子高不是同一个概念 行高指的是每行内容的高度 盒子高指的是元素的高度

怎么办？第一步:先把行高设置成20px 第二步;再设置自身padding的top与bottom为20px就行了.这样就和行高80px一样。

还原字体与字号:

<!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{
            box-sizing: border-box;
            width: 610px;
            height: 110px;
            background-color: #cdcdcd;
            border: 1px solid #000000;
            font-family:"黑体";
            font-size: 20px;
            line-height: 40px;
            color: #67676d;
            padding-top: 10px;
        }
    </style>
</head>
<body>
<p>葬爱:非主流文化的常用词，是当今网络流行术语.且流行于非主流杀马特之中。葬，即埋葬，爱，即爱情，翻译成外语就bury love</p>

</body>
</html>

注意点;

这两行文字要达到垂直居中的话,应该行高*2+font-size+padding-top就等于line-height了.110;

效果：

margin传递问题

1.在父子元素中，如果给子元素设置了margin-top，默认会传递到父元素？怎么办？ 2.2给父元素添加两行代码

overflow: hidden;
*zoom: 1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>57-margin传递问题</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            overflow: hidden;
            *zoom: 1;
        }
        .son{
            width: 200px;
            height: 100px;
            background: blue;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

注意点：是给父元素添加哦(这两句代码)