HTML&CSS基础-内联元素的盒模型

　　　　　　　　　　　　　　HTML&CSS基础-内联元素的盒模型

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

一.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内联元素的盒模型</title>
        
        <style type="text/css">
        
            span{
                background-color: red;
            }
            
            .box1{
                width: 300px;
                height: 300px;
                background-color: yellow;
            }
            
            .s1{
                /**
                 *     内容区:
                 *         内联元素不能设置,因为计时设置了也没有任何的效果
                 */
                width: 200px;
                height: 300px;
                
                /**
                 *     水平内边距:
                 *         内联元素是可以设置水平方向的内边距
                 */
                padding-left: 100px;
                padding-right: 100px;
                
                /**
                 *     垂直内边距:
                 *         内联元素可以设置垂直方向内边距，但是不会影响页面的布局,只不过显示效果会有所不同而已(它可以把它垂直方向的元素区域给覆盖而不会挤压)。
                 */
                padding-top: 50px;
                padding-bottom: 50px;
                
                /**
                 *     边框设置:
                 *         内联元素可以设置边框，虽然水平方向是可以影响到页面布局，但是垂直方向依旧是不会影响页面的布局哟~
                 */
                border: 50px blue solid;
                
                /**
                 *     水平外边距:
                 *         内联元素支持水平方向的外边距
                 */
                margin-left: 30px;
                margin-right: 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>

二.浏览器打开以上代码渲染结果

HTML&CSS基础-内联元素的盒模型

推荐阅读