web前端入门到实战：内边距属性、外边距属性

最新推荐文章于 2024-08-12 09:00:00 发布

魔方编程

最新推荐文章于 2024-08-12 09:00:00 发布

阅读量5.4k

点赞数 3

文章标签：前端 web前端前端开发前端教程前端基础

本文链接：https://blog.csdn.net/wewfdf/article/details/102410885

版权

本文介绍了web前端开发中的内边距和外边距属性。内边距定义为边框与内容之间的距离，会影响标签的尺寸及背景颜色。外边距则是标签之间的距离，其区域无背景颜色。文章通过分开写、连写等方式详细阐述了这两个概念，并给出了实例和注意事项。

摘要由CSDN通过智能技术生成

一、内边距属性

1.定义：边框和内容之间的距离就是内边距

2.分开写

padding-top:数字px；

padding-left:数字px；

padding-bottom:数字px；

padding-right:数字px；

3.连写：

padding：上 右 下 左；

4.注意点：

（1）给标签设置内边距之后，标签占有的宽度和高度会发生变化

（2）内边距也会有背景颜色

<style>

    div{

        font-size: 25px;

        width:100px;

        height: 100px;

        border: 1px solid red;

        background-color: green;

    }

    .box1{

        padding-top:20px;

    }

    .box2{

        padding-left: 30px;

    }

    .box3{

        padding-bottom: 40px;

    }

    .box4{

        padding-right:50px;

    }

    .box5{

        padding:40px 60px 70px 80px;

    }

</style>

<body>

<div class="box1">我是段落一</div>

<div class="box2">我是段落二</div>

<div class="box3"