关于行盒的坑：内边距、边框、外边距

先说结论，再上代码。

内边距（填充区）

水平方向有效，垂直方向不会实际占据空间。

边框

水平方向有效，垂直方向不会实际占据空间。

外边距

水平方向有效，垂直方向不会实际占据空间。

代码以padding为例子，其他可自行验证。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
       span{
    
    
           background-color: pink;
           line-height: 3;
       }
       div{
    
    
           background-color: green;;
       }
   </style>
</head>
<body>
    <span>好好学习我怕是健康就能看福晶科技看风景刻录机按付款就卡了今年付款了那是开发房间卡时间里看风景卡拉胶时空裂缝金坷垃麻烦时间啊看风景阿拉基弗拉门放里面</span>
    <span>我是斯诺克等级考试那地方仓库是否吗方面你放开你看菲尼克斯南方可能您是否都能考上南方可能是你呢即可顺风车尼克斯明年看房产税里面了看到了能否为对方能考多少分你看是否能考虑适当你看了啥地方放你们可适当你付款</span>
    <div>天天向上</div>
</body>

在这里插入图片描述

当我们给div和第一个span同时添加了垂直方向的padding时，会发现span在垂直方向上的padding只加在了背景上，并没有把字体挤下来，而给div加了padding之后，把字体挤了下来。
在这里插入图片描述
我在电脑上可能看着不大明显，朋友们可以自己试试差异。如还纳闷，我们再看看下面：

a标签的padding只是在视觉方面加上了，但是并未占据实际空间。
这就是在做项目时使用行内标签时（多行文本）时设置垂直方向上padding未生效的原因。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a{
    
    
            background: red;
            color:#fff;
            /* width: 100px; */
            padding: 10px 20px;
        }
        div{
    
    
            background-color: orange;
        }
    </style>
</head>
<body>
    <span>122</span>
    <a href="">
        百度
    </a>
    <div>哈哈</div>
</body>
</html>

关于行盒的坑：内边距、边框、 外边距

猜你喜欢

关于行盒的坑：内边距、边框、外边距