时间戳

首页 > 解决方案 > 有什么方法可以使用

顶部或底部没有空间？

html - 有什么方法可以使用

顶部或底部没有空间？

问题描述

我知道标题可能听起来令人困惑，但基本上我想知道是否有任何方法可以使用分段符但在文本上方或下方没有任何内容时在顶部或底部没有空格？这是我的意思的一个例子

body {
    font-family:arial;
    background:#222;
}

#wrapper {
    width:100%;
    margin-top:100px;
}

.post_container {
    background:#fff;
    border:1px solid red;
    width:500px;
    height:auto;
    text-align:justify;
    padding:15px;
    margin:0 auto;
    margin-bottom:50px;
}

.post {
    font-size:16px;
}

<body>
<div id="wrapper">

<div class="post_container">

<div class="post">

    <div style="height:auto;max-height:550px;overflow:auto;scrollbar-width:none;">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue. Amet aliquam id diam maecenas ultricies mi. Mi quis hendrerit dolor magna eget est. Pharetra magna ac placerat vestibulum lectus. Sagittis vitae et leo duis. Id nibh tortor id aliquet. Nullam non nisi est sit. Urna molestie at elementum eu facilisis. Pellentesque id nibh tortor id aliquet. Eget nullam non nisi est sit. Velit sed ullamcorper morbi tincidunt. Ac auctor augue mauris augue. Velit aliquet sagittis id consectetur. Amet justo donec enim diam vulputate ut pharetra sit. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Cursus eget nunc scelerisque viverra mauris in aliquam sem.</p>

<p>At lectus urna duis convallis convallis tellus id. Egestas sed sed risus pretium quam vulputate dignissim. Tristique senectus et netus et malesuada fames ac turpis. Volutpat commodo sed egestas egestas fringilla. Ipsum dolor sit amet consectetur adipiscing. Donec massa sapien faucibus et molestie ac feugiat. Blandit massa enim nec dui nunc mattis enim. Id ornare arcu odio ut sem nulla pharetra diam sit. Id venenatis a condimentum vitae sapien. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Turpis in eu mi bibendum neque egestas congue quisque. Quis varius quam quisque id diam vel quam elementum pulvinar. Nunc scelerisque viverra mauris in aliquam. Turpis egestas maecenas pharetra convallis posuere. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Ornare suspendisse sed nisi lacus sed viverra. Adipiscing commodo elit at imperdiet dui accumsan sit amet. Varius duis at consectetur lorem donec massa sapien faucibus. At consectetur lorem donec massa sapien faucibus et molestie ac.</p>

<p>Fringilla ut morbi tincidunt augue interdum velit euismod. Mi quis hendrerit dolor magna eget. Ultricies integer quis auctor elit sed vulputate mi sit. Quis lectus nulla at volutpat. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Duis convallis convallis tellus id. Dignissim sodales ut eu sem. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Non enim praesent elementum facilisis. Ultricies mi eget mauris pharetra. Id leo in vitae turpis massa sed elementum. Cursus risus at ultrices mi. In iaculis nunc sed augue lacus viverra vitae congue. Aliquet bibendum enim facilisis gravida neque convallis a cras. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla.</p>

<p>Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Ut venenatis tellus in metus vulputate eu. Nibh venenatis cras sed felis eget velit aliquet sagittis. Amet cursus sit amet dictum sit amet justo donec. Euismod in pellentesque massa placerat duis ultricies lacus sed turpis. Purus sit amet luctus venenatis lectus. Augue interdum velit euismod in. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Non tellus orci ac auctor augue mauris augue neque. Arcu dui vivamus arcu felis. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Eget dolor morbi non arcu risus. Rutrum tellus pellentesque eu tincidunt tortor. Enim facilisis gravida neque convallis a cras semper. Quis ipsum suspendisse ultrices gravida. A cras semper auctor neque vitae tempus quam.</p>

<p>Tincidunt dui ut ornare lectus sit amet est placerat. Ultricies lacus sed turpis tincidunt. Aliquam eleifend mi in nulla posuere sollicitudin aliquam. Lectus quam id leo in vitae turpis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Tincidunt praesent semper feugiat nibh sed pulvinar proin. Hac habitasse platea dictumst quisque sagittis purus. Amet aliquam id diam maecenas ultricies mi eget mauris. A lacus vestibulum sed arcu non odio euismod lacinia. Magna etiam tempor orci eu. Velit laoreet id donec ultrices tincidunt arcu. Aenean pharetra magna ac placerat vestibulum lectus mauris. Turpis cursus in hac habitasse platea dictumst. Imperdiet nulla malesuada pellentesque elit eget gravida. Magna eget est lorem ipsum dolor sit amet. Sagittis purus sit amet volutpat. Morbi tristique senectus et netus et malesuada fames ac turpis.</p>

    </div> <!-- scroll style  -->
</div> <!-- post -->
</div> <!-- post container -->
</body>

标签： htmlcss

解决方案

您有 15px 的内边距post_container，您可以从中更改padding: 0 15px;以删除顶部和底部内边距。然后，您需要覆盖margin: 1em其他人指出的默认 p 样式。一种方式如下所示：

body {
    font-family:arial;
    background:#222;
}

#wrapper {
    width:100%;
    margin-top:100px;
}

.post_container {
    background:#fff;
    border:1px solid red;
    width:500px;
    height:auto;
    text-align:justify;
    padding:0 15px;
    margin:0 auto;
    margin-bottom:50px;
}

.post {
    font-size:16px;
}
<div id="wrapper">
  <div class="post_container">
    <div class="post">
      <div style="max-height:550px;overflow:auto;scrollbar-width:none;">
        <p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        <p>At lectus urna duis convallis convallis tellus id. Egestas sed sed risus pretium quam vulputate dignissim. Tristique senectus et netus et malesuada fames ac turpis. Volutpat commodo sed egestas egestas fringilla. </p>
        <p style="margin: 0;">Fringilla ut morbi tincidunt augue interdum velit euismod. Mi quis hendrerit dolor magna eget. Ultricies integ</p>
      </div> <!-- scroll style  -->
    </div> <!-- post -->
  </div> <!-- post container -->

推荐阅读