css中的内联元素

最新推荐文章于 2024-05-15 00:45:00 发布

原创最新推荐文章于 2024-05-15 00:45:00 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>内联元素</title>
        <!--1.内联元素也是盒子，内联元素不能设置宽高<span></span>,不支持垂直水平方向的外边距，
            支持边框，但是垂直方向的边框不会影响布局，会影响水平方向布局
            可以设置垂直内边距，但不影响布局，水平方向可以设置内边距，会影响布局
            外边距：水平方向支持，且不会发生重叠，垂直方向不支持
            浏览器会自带一些样式，写css样式表之前，会需要通过下列代码清除浏览器自带的浮动

        -->
        <style type="text/css">
            .box1{
                border:1px solid skyblue;<!--边框可以设置，但是垂直方向不影响布局，会影响水平方向布局-->
                padding-left: 100px;
                padding-top: 100px;<!--可以设置垂直内边距，但不影响布局-->
                padding-bottom: 100px;
                padding-right: 100px;<!--水平方向可以设置内边距，会影响布局-->
                margin-left: 100px;
                margin-right: 100px;<!--水平方向支持，且不会发生重叠，垂直方向不支持-->
                margin-top: 100px;

                }

        </style>
    </head>
    <body>
        <span class="box1">今天天气很好</span>
        <span class="box2"></span>
        <span class="box3"></span>
        <span class="box4"></span>
    </body>
</html>