新闻内容

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻内容</title>
    <style type="text/css">
        /*统一行距*/
        #content > :first-child {
            padding-top: 0;
            margin-top: 1em;
        }

        #content > :last-child {
            padding-bottom: 0;
            margin-bottom: 1em;
        }

        #content > * {
            margin: 1em 0;
        }

        #article > header {
            margin-bottom: 1em;
        }

        #article > footer {
            margin-top: 1em;
        }

        /*隐藏空白段落*/
        #content > p:empty {
            display: none;
        }
    </style>
</head>
<body>
<article id="article">
    <header>
        <h1>文章标题</h1>
    </header>
    <section id="content">
        <div>发布日期：2017-4-3</div>
        <p>段落1...</p>
        <p>段落2...</p>
        <p></p>
        <p>段落3..</p>
        <p></p>
        <p></p>
    </section>
    <footer>版权所有</footer>
</article>

</body>
</html>

 

相关资料：CSS 外边距(margin)重叠及防止方法

 

posted @ 2017-04-03 10:30  linyongqin  阅读(124)  评论(0)    收藏  举报