CSS内边距、外边距、边框

最新推荐文章于 2025-07-03 07:51:35 发布

倒霉男孩

最新推荐文章于 2025-07-03 07:51:35 发布

阅读量516

点赞数 3

CC 4.0 BY-SA版权

分类专栏： html+css学习笔记文章标签： css 前端

本文链接：https://blog.csdn.net/2401_86523075/article/details/147451329

html+css学习笔记专栏收录该内容

42 篇文章

订阅专栏

CSS内边距

内边距：内容区（Content）与边框（Border）之间的透明间距，用于增加元素内部的留白。不影响元素内容本身的尺寸（如文字大小），但会增大元素的总占用空间。

以下是CSS中常用的内边距属性：
padding-top: 设置元素的顶部内边距大小
padding-right: 设置元素的右侧内边距大小
padding-bottom: 设置元素的底部内边距大小
padding-left: 设置元素的左侧内边距大小
padding : 设置元素的所有内边距大小

以下是一个内边框设置示例：

<!DOCTYPE html>
<html>
<head>
    <title>CSS内边距示例</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            padding: 20px;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div class="box">这是一个盒子</div>
</body>
</html>

CSS边框

边框：定义围绕内容和内边距的可见边界线，用于装饰或分隔元素。直接影响元素的总尺寸。

border-width: 设置边框宽度
border-style: 设置边框样式（solid/dashed/dotted/double等）
border-color: 设置边框的颜色。
border : 可以一次性设置边框的宽度、样式和颜色。

以下是一个边框设置示例：

<!DOCTYPE html>
<html>
<head>
    <title>CSS边框示例</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div class="box">这是一个盒子</div>
</body>
</html>

CSS外边距

外边距：元素与其他元素之间的透明间距，用于控制元素外部的布局间隔。
不影响元素自身尺寸，但会改变元素在页面中的占位空间。
1.设置单个方向的外边距：

margin-top: 10px;     //上方外边距为10px
margin-right: 20px;   //右方外边距为20px
margin-bottom: 30px;  //下方外边距为15px
margin-left: 40px;    //左方外边距为30px

2.使用缩写形式设置四个方向的外边距:

margin : 10px;       //四个方向外边距都为10px

以下是设置外边距示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 20px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box2">Box 3</div>
</body>
</html>