5分钟带你理解内边距属性 padding

最新推荐文章于 2023-02-27 09:39:57 发布

Dariuslwk

最新推荐文章于 2023-02-27 09:39:57 发布

阅读量3.1k

点赞数 1

分类专栏： DAYNOTE 文章标签： css html

本文链接：https://blog.csdn.net/qq_44158936/article/details/105125795

版权

DAYNOTE 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

1、定义与用法

padding 简写属性在一个声明中设置所有内边距属性

说明：

这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注释：不允许使用负值。

2、padding 属性及其值

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。

3、案例分析

3.1、使用内边距

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内边距-padding</title>
        <style type="text/css">
            .outer{
                border: 1px solid #3333ff;
                margin: 100px;
            }

            .box{
                border: 1px solid #af3333;
                margin: 50px;
                padding: 100px;
            }

            .inner{
                background-color: #41ffaa;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="box">
                <div class="inner"></div>
            </div>
        </div>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8efRstp9-1585221158858)(D:\DAYNOTE\内边距-padding.PNG)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7VjT4msH-1585221158860)(D:\DAYNOTE\内边距-padding示意图.PNG)]$

此时，我们设置 box 的四周内边距为 100px

3.2、内边距 padding 的两种写法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内边距-padding的不同写法</title>
        <style type="text/css">
            .outer{
                border: 1px solid #3333ff;
                margin: 100px;
            }

            .box{
                border: 1px solid #af3333;
                margin: 50px;
            }

            .inner{
                background-color: #41ffaa;
                height: 100px;
            }
            /*内边距的第一种写法：四周内边距分开写*/
            .first{
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 50px;
                padding-left: 20px;
            }
            /*内边距的第二种写法：灵活使用四周内边距*/
            .second{
                /*padding: 50px;   !*指定四周内边距均为50px*!*/
                /*padding: 25px 50px;    !*指定上下内边距均为25px、左右边距均为50px*!*/
                /*padding: 25px 50px 75px; !*指定上内边距为25px、右内边距为50px、下内边距为75px、左内边距未设置，默认与右内边距相同*!*/
                padding: 25px 50px 75px 100px;/*指定上内边距为25px、右内边距为50px、下内边距为75px、左内边距为100px*/
            }
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="box first">
                <div class="inner">内边距的第一种写法：四周内边距分开写</div>
            </div>
        </div>

        <div class="outer">
            <div class="box second">
                <div class="inner">内边距的第二种写法：灵活使用四周内边距</div>
            </div>
        </div>

    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EkOJJcsE-1585221158860)(D:\DAYNOTE\内边距 padding 的两种写法.PNG)]$

3.3、利用 padding 计算元素的尺寸

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算元素尺寸</title>
        <style type="text/css">
            .outer{
                border: 1px solid #3333ff;
                margin: 100px;
            }

            .box{
                border: 5px solid #af3333;
                margin: 50px;
                padding: 70px;
            }

            .inner{
                background-color: #41ffaa;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="box">
                <div class="inner"></div>
            </div>
        </div>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iAzXF5En-1585221158861)(D:\DAYNOTE\利用padding计算元素尺寸.PNG)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A7hwaVnR-1585221158862)(D:\DAYNOTE\box的元素尺寸.PNG)]$

通过 谷歌浏览器的F12检查 盒子模型可以快速查看元素的尺寸
元素尺寸由表及里包括：外边距（margin）、边框（border）、内边距（padding）、内容（content）
其中子元素是包含在父元素的内容里

Dariuslwk

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
5分钟带你理解内边距属性 padding

1、定义与用法padding 简写属性在一个声明中设置所有内边距属性说明：这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。**注释：**不允许使用负值。2、padding 属性及其值...
复制链接

扫一扫