line-height最详解

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>

注意点:是给父元素添加哦(这两句代码)
在这里插入图片描述

效果:

在这里插入图片描述

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贵哥的编程之路(热爱分享)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值