css 外边距，内边距

最新推荐文章于 2024-04-13 15:16:57 发布

深浅Java

最新推荐文章于 2024-04-13 15:16:57 发布

阅读量2.7k

点赞数 3

文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_46813809/article/details/120188696

版权

外边距

外边距属性可以定义元素周围的空间，没有颜色，是透明的。

属性	说明
margin-bottom	设置元素的下边距
margin-top	设置元素的上边距
margin-left	设置元素的左边距
margin-right	设置元素的左边距

组合属性

margin: 10px 5px 3px 20px ;
1. 上边距10px；
2. 右边距5px；
3. 下边距3px；
4. 左边距20px；
margin: 23px 43px 10px；
1. 上边距23px；
2. 左右边距43px；
3. 下边距10px；
margin: 20px 10px;
1. 上下边距20px；
2. 左右边距10px；
margin: 20px；
1. 上下左右20px；

示例：

<style>
    .div1 {
        width: 600px;
        height: 400px;
        color: rgb(100, 123, 255);
        outline: 2px solid red;
        text-align: center;
        line-height: 400px;
        overflow: hidden;
    }
    
    .div2 {
        width: 100px;
        height: 100px;
        background-color: rgb(123, 255, 248);
        margin-left: 250px;
        margin-top: 150px;
    }
</style>

<body>
    <div class="div1">
        <div class="div2">

        </div>
    </div>
</body>

div盒子移动

内边距

padding定义元素内容于边框的空间，也是没有颜色及透明。

属性	说明
padding-bottom	设置底部的内边距
padding-left	设置左边的内边距
padding-top	设置顶部的内边距
padding-right	设置右边的内边距

组合属性

padding：10px 20px 16px 20px；
1. 上内边距10px；
2. 右内边距20px；
3. 下内边距16px；
4. 左内边距20px；
padding： 10px 23px 40px；
1.上内边距10px；
2. 左右内边距23px；
3. 下内边距40px；
padding： 12px 10px ；
1. 上下内边距12px
2. 左右内边距10px；
padding： 20px；

1.上下左右内边距20px；

<style>
    .div1 {
        width: 600px;
        height: 400px;
        background-color: rgb(255, 213, 213);
        color: rgb(100, 123, 255);
        text-align: center;
        /*下方的属性防止盒子撑大*/
        box-sizing: border-box;  
        padding-left: 100px;
        padding-top: 150px;
    }
</style>

<body>
    <div class="div1">
        学习前端知识
    </div>
</body>

padding变换

深浅Java

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
css 外边距，内边距

外边距外边距属性可以定义元素周围的空间，没有颜色，是透明的。属性说明margin-bottom设置元素的下边距margin-top设置元素的上边距margin-left设置元素的左边距margin-right设置元素的左边距组合属性margin: 10px 5px 3px 20px ;1. 上边距10px；2. 右边距5px；3. 下边距3px；4. 左边距20px；margin: 23px 43px 10px；上边距23px；
复制链接

扫一扫