内联元素的盒子模型

最新推荐文章于 2023-11-17 15:27:26 发布

易拉易拉罐

最新推荐文章于 2023-11-17 15:27:26 发布

阅读量387

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/wuxiao18/article/details/91574771

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            background-color: #bfa;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .s1{
            /*
             *内容区，内边距，边框，外边距
             */

            /*
            *内联元素不能设置width和height
            */
           /* width: 100px;
            height: 100px;*/

            /*
            *设置水平内边距,内联元素可以设置水平方向的内边距，会影响布局
            */
         /*   padding-left: 100px;
            padding-right:100px;*/

            /*
            *垂直方向的内边距,内联元素可以设置垂直内边距，但是不会影响布局，只是显示效果有所变化
            */
            /*padding-top:100px;
            padding-bottom:100px;*/

            /*
            *为元素设置边框,内联元素可以设置边框，垂直方向不影响布局，水平方向影响布局
            */
            /*border:red 1px solid;*/

            /*
            *水平外边距
            *内联元素支持 水平方向的外边距
            */
           /* margin-left:100px;*/

            /*
            *内联元素不支持垂直外边距
            */
           /* margin-top:200px;
            margin-bottom:200px;*/
        }
        .s2{
            /*
            *为右边的元素设置一个左外边距
            *水平方向的外边距不会重叠，而是求和
            */
            margin-left:100px;
        }
    </style>
</head>
<body>
    <span class="s1">我是一个span</span>
    <span class="s2">我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <div class="box1"></div>
</body>
</html>

易拉易拉罐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内联元素的盒子模型

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> span{ background-color: #bfa; ...
复制链接

扫一扫