HTML豆腐花

    1、 如果一个元素为行内元素,则这个行内元素的padding无法撑起父元素。

 

对应的代码：

 

 

    <style type="text/css">
        .wrapper {
            background: yellowgreen;
            width: 200px;
        }
        .content {
            background: lightblue;
            padding:100px 0px;
            margin-left: 10px;
            font-size: 40px;
        }
    </style>
    <body>
        <div class="wrapper">
            <a class="content">
                sdf
            </a>
        </div>
    </body>

2、两个行内元素左右并列，世界依然正常。如果右侧元素包含一个行内元素.....

 

    <style type="text/css">
        .wrapper {
            background: yellowgreen;
            width: 250px;
        }
        .content {
            background: lightblue;
            display: inline-block;
            width: 50px;
            height: 50px;
        }
        .content2>div {
            width: 50px;
            height: 50px;
            background: lightcoral;
        }
    </style>
    <body>
        <div class="wrapper">
            <div class="content1 content"></div>
            <div class="content2 content">
                <a>Hello</a><a>World</a>
            </div>
            <div class="content2 content">
                <div>block</div>
            </div>
            <div class="content2 content">
                <div></div>
            </div>
        </div>
    </body>

 

posted @ 2016-01-07 13:51  Dalink  阅读(156)  评论(0)  编辑  收藏  举报