什么是盒子模型中的内边距

最新推荐文章于 2023-03-16 21:12:26 发布

翘指

最新推荐文章于 2023-03-16 21:12:26 发布

阅读量629

点赞数

分类专栏： html 文章标签： java 开发语言 html

本文链接：https://blog.csdn.net/m0_65334415/article/details/127478361

版权

html 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

内边距：

内容区和内边距区别方法

padding 的简写属性

内边距：

内容区和边框之间的距离是内边距

一共有四个方向的内边距

padding-top

padding-right

padding-bottom

padding-left

内边距的设置会影响到盒子的大小

背景颜色也会延伸到内边距上

<!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>
        
        .box{
            background-color: aqua;
           border: 30px orange solid;
           padding-top: 70px;
        }
    </style>
</head>
<body>
    <div class="box">sduifhiusdhfuhsdu</div>
</body>
</html>

内容区和内边距区别方法

因为背景颜色也会延伸到内边距上，所以内容区和内边距就不太好区分，那么有没有什么方法可以进行区分呢，如下：设置一个子元素inner，并且用子元素将父元素充满，然后设置子元素的背景颜色即可

盒子的可见框的大小，由内容区内边距和边框共同决定，所以在计算盒子大小的时候，需要将这三个区域加到一起计算

<!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>
        .inner{
            width: 100%;
            height: 100%;
            background-color:red;
        }
        
        .box{
            background-color: aqua;
            width: 300px;
            height: 300px;
           border: 20px orange solid;
           padding-top: 200px;
           padding-right: 200px;
           padding-bottom: 200px;
           padding-left: 200px;
        }
        
    </style>
</head>
<body>
    <div class="box" >
        <div class="inner">sdhfusdhfud
        </div>
    </div>
</body>
</html>

padding 的简写属性

padding内边距的简写属性：可以同时指定四个方向的内边距，规则和border-width一样

<!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>
        .inner{
            width: 100%;
            height: 100%;
            background-color:red;
        }
        
        .box{
            background-color: aqua;
            width: 300px;
            height: 300px;
           border: 20px orange solid;
           padding: 20px 40px 80px 260px ;
        }
        
    </style>
</head>
<body>
    <div class="box" >
        <div class="inner">sdhfusdhfud
        </div>
    </div>
</body>
</html>

翘指

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
什么是盒子模型中的内边距

因为背景颜色也会延伸到内边距上，所以内容区和内边距就不太好区分，那么有没有什么方法可以进行区分呢，如下：设置一个子元素inner，并且用子元素将父元素充满，然后设置子元素的背景颜色即可。盒子的可见框的大小，由内容区内边距和边框共同决定，所以在计算盒子大小的时候，需要将这三个区域加到一起计算。padding内边距的简写属性：可以同时指定四个方向的内边距，规则和border-width一样。
复制链接

扫一扫