css之内边距和外边距属性

最新推荐文章于 2023-12-19 15:56:44 发布

小鱼的池塘

最新推荐文章于 2023-12-19 15:56:44 发布

阅读量4.1k

点赞数

分类专栏：前端基础语言从学习文章标签： css

本文链接：https://blog.csdn.net/haha_hello/article/details/56482742

版权

前端基础语言从学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一，内边距属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>47-内边距属性.html</title>
    <style>
        div{
            width: 98px;
            height: 90px;
            border:solid;
        }
        .box1{
            padding-top: 20px;
        }
        .box2{
            padding-left: 20px;
        }
        .box3{
            padding-right: 100px;
        }
        .box4{
            padding-bottom: 50px;
        }
        .box5{
            padding: 20px 50px 100px 200px;
        }
    </style>
</head>
<body>

<!--
    1,什么是内边距
    边框和内容之间的距离
    2,格式
    (1),不连写
    padding-top
    padding-bottom
    padding-left
    padding-right
    (2),连写
    padding: 上 右 下 左
    可以省略取值
-->
<div class="box1">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
<hr>
<div class="box2">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
<hr>
<div class="box3">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
<hr>
<div class="box4">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
<hr>
<div class="box5">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
</body>
</html>

二，外边距属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48-外边距属性.html</title>
    <style>
        span{
            /* span 是行内元素 不能设置宽高 要设置需要转换 */
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        div{
            height: 50px;
            border: 1px solid #000;
        }
        .box1{
            /*margin-top: 20px;
            margin-right: 40px;
            margin-bottom: 80px;
            margin-left: 160px;*/
            margin: 20px 40px 80px 160px;
        }
    </style>
</head>
<body>
<!--
    1,外边距
    标签和标签之间的距离
    2,格式
    (1),连写
    margin:上 右 下 左;
    (2),非连写
    margin-top:;
    margin-right:;
    margin-bottom:;
    margin-left:;
    3,注意
-->
<span class="box1">我是span</span><span class="box2">我是span</span><span class="box3">我是span</span>
<div class="box"></div>
</body>
</html>

三，外边距合并的特殊之处

外边距设置，在水平方向上的两个标签上都相向设置，那么就会将两个外边距的距离叠加在一起；
在在垂直方向上的两个标签上都相向设置，那么就会有一个比较大的外边距代替两个外边距，不会叠加，只会显示一个比较大外边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>49-外边距的合并现象.html</title>
    <style>
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        /* 设置右边距 */
        .hezi1{
            margin-right: 50px;
        }
        .hezi2{
            margin-left: 100px;
        }
        .box1{
            margin-bottom: 50px;
        }
        .box2{
            margin-top: 150px;
        }
    </style>
</head>
<body>
<!--
    在默认布局的垂直方向上,默认情况下外边距是不会叠加的,会出现合并现象,谁的外边距大就会听谁的
-->
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>

小鱼的池塘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css之内边距和外边距属性

一，内边距属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>47-内边距属性.html</title> <style> div{ width: 98px; height: 90px; border
复制链接

扫一扫