Question

出于某种原因，我无法减少2行（see picture and this link for live demo）之间的“空”空间。我尝试了很多东西（行高，边距顶部和底部，填充等），但没有成功。这个，出于某种原因是棘手的。我试图在JSFiddle上重现这个问题而没有成功。

修改：我现在已经删除了2对p标签之间的<br>，但它创建了一个新问题：两条线（两对p标签）现在都显示为一条单行

displaying the error in the image

来自css / mettile.css的CSS代码

.tile-five {
    width: 400px;
    height: 46px;
    display: block;  
    margin-right: 0px;
    border-radius: 20px; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px;
}


.tile-five:hover {
    outline: solid 4px #dadada;
}

.tile-five-small {
    width: 180px;
    height: 180px;
    display: block;
}

.tile-five-small:hover {
    outline: solid 4px #dadada;
}

.tile-five-text-area {
    width: 100%;
    height: 100%;
    background-color: #f2F2F2;
    padding-left: 12px;

}

.tile-five-text-area label {
    color: white;
    font-size: 25px;
    line-height: 13px;
    text-align: left;
    float: left;
}

.tile-five-text-area p {
    color: #333;
    font-size: 13px;
    padding-top: 5px;
    margin: 8px 5px 5px 5px;
    text-align: left;
    float: left;
}

HTML

<div id="sub-header">
        <div class="sub-header-wrapper">
          <div class="left">
            <h1>LOREM IPSUM</h1>
            <h2>Votre dfds dfdsf dsfds (dfds fds) à Luiotkjkjkjy</h2>
          </div>
          <!-- End Left -->
          <div class="right"><a id="MetTileFive" class="tile-five" href="http://www.facebook.com/" target="_blank">
            <div>
            <p><strong>Actualité</strong></p>
            <br>
            <p>Découvrez <strong>Ladkkiu</strong>, un concept unique au Luiotsddqsdykjkjkj</p>
          </div>
            <div>
            <p><strong>Actualité</strong></p>
            <br>
            <p>Atelier dfdsf à Luioty le 03 Mars 2014. Réservez vite!</p>
          </div>
            </a></div>
          <!-- End Right --> 
        </div>
        <!-- End Wrapper --> 

      </div>
      <!-- End sub-header-->

Answer 1

可以通过以下方式减少2行之间的“空”空格：

#sub-header .right {
    float: right;
    padding-right: 20px;
    line-height: 4px;
    }

或

#sub-header p {
line-height: 1px;
}

Answer 2

要做到这一点，css中有一个名为line-height的特殊属性，您可以将其设置为1em以降低高度。more info。请记住只使用em或像素。 why?。
这样就可以根据需要控制垂直距离。

Answer 3

删除＆lt; br＆gt;在你的＆lt; p>标签，因为它会在您的线之间创建空白区域。

如果代码看起来像这样你应该没问题，我只是用铬看着它，文本行是两行而不是一行。

<div class="tile-five-text-area">
        <p><strong>Actualité</strong></p>

        <p>Découvrez <strong>Ladkkiu</strong>, un concept unique au Luiotsddqsdykjkjkj</p>
</div>

Answer 4

不要使用两个单独的p标签，而是尝试使用单个p标签书写

<div>
            <p><strong>Actualité</strong>
            <br />
            Découvrez <strong>Ladkkiu</strong>, un concept unique au Luiotsddqsdykjkjkj</p>
</div>

p和h1之类的元素是块元素，因此在连续的行之间插入一些空格。

无法摆脱2条线之间的额外空间

4 个答案: