内联盒子

Posted caicaihong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了内联盒子相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta charset="utf-8">
        <style type="text/css">
            .box1{
                width: 200px;
                height: 200px;
                border: 1px solid deeppink;
                background: pink;
            }
            .s1{
                /*
                内容区、内边距、边框、外边距
                内联元素不能设置width和height（是没有作用的）
                */
                height: 100px;
                width: 100px;
                /*
                设置水平内边距，内联元素可以设置水平方向的边距，会影响布局，就是会挤其他的盒子
                */
                padding-left: 100px;
                padding-right: 100px;
                /*
                垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局，其他盒子不会被挤开，不会动。
                */
                /*
                为元素设置边框
                内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
                */
                /*
                水平外边距
                内联元素支持水平方向的外边距，会影响布局
                水平方向的外边距不会重叠，而是求和
                内联元素不支持垂直外边距
                */
            }
        </style>
    </head>
    <body>
        <span class="s1">我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
        <div class="box1">
            
        </div>
            
        
    </body>
</html>

 

以上是关于内联盒子的主要内容，如果未能解决你的问题，请参考以下文章

<code> vs <pre> vs <samp> 用于内联和块代码片段

内联元素的盒子模型与文档流定位padding属性

3.4 内联块元素

内联元素，取消间隙和默认效果

18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素内联元素内联块元素

内联盒子