PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

css如何设置内边距

醉折花枝作酒筹
醉折花枝作酒筹 原创
2021-04-21 17:27:51 5702浏览

css中,可以使用padding属性设置内边距,只需要给元素设置“padding:数值+单位|百分比数值”即可。padding属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。padding属性不允许指定负边距值。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

我们来看一下设置padding(内边距)的方法:

我们的内间距是属于css盒模型之中的一种,那么现在我们来看看内间距都是怎么设置的吧。

padding: 是一个简写属性,可以设置一个声明中的所有内边距属性。

单独使用 padding 属性可以改变上下左右的填充。

可能的值:

length:定义一个固定的填充(像素, pt, em,等)

%:使用百分比值定义一个填充

用法:

padding-left 设置对象距离左边的边距补白间隔

div{padding-left:5px}

对象内距离左边补白间距为5px

padding-right 设置对象距离右边的边距补白间隔

div{padding-right:5px}

对象内距离右边补白间距为5px

padding-top 设置对象距离上边的边距补白间隔

div{padding-top:5px}

对象内距离上边补白间距为5px

padding-bottom 设置对象距离下边的边距补白间隔

div{padding-bottom:5px}

对象内距离下边补白间距为5px

说明

检索或设置对象四边的补丁边距。

如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。

如果只提供一个,将用于全部的四条边。

如果提供两个,第一个用于上-下,第二个用于左-右。

如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。

Padding的值不能为负值。

实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .css{ 
                width:350px; 
                height:80px; 
                border:1px solid #00F; 
                padding-left:40px;
                padding-right:40px;
                padding-top:40px;
                padding-bottom:40px;
                /* 可以合起来写成padding:40px; */
                } 
    </style> 
    </head>

    <body>
        <div class="css">padding用法</div>
    </body>
</html>

效果图:

8[CXHPRJ(R{FD[D$7HFEU58.png

推荐学习:css视频教程

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。