第二个内嵌块div上方的空白区域 [英] White space above second inline-block div

问题描述

我确信我在这里忽略了一些东西，但无法解决。我的第二个inline-block div上面有空白，这只发生在右侧div中的'text here'长度小于左侧'

I'm sure I've overlooked something here but cannot work it out. There's white space above my second inline-block div, and this only occurs when the 'text here' length in the right div is less than that in the left.

jsFiddle ： http://jsfiddle.net/B2S4r/2/ （您需要扩大HTML视图才能看到它们一边一边）

jsFiddle: http://jsfiddle.net/B2S4r/2/ (You'll need to make the HTML view wider to see them along side each other)

<div style="border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;">

    <div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;">
        <div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;">
        </div>

        <span class="main_header" style="font-size: 21px; margin: 0;">Title</span>
        <br />
        Subtitle

    </div>

    <div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;">
    Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here 
    </div>
</div>

<div style="border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;">

    <div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;">
        <div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;">
        </div>

        <span class="main_header" style="font-size: 21px; margin: 0;">Title</span>
        <br />
        Subtitle

    </div>

    <div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;">
    Text here Text here Text here Text here Text here Text here Text here Text here Text 
    </div>
</div>​

推荐答案

默认 vertical-align 的值是 baseline ，并且当应用于不同高度的块时，通常不需要。

Default value of vertical-align is baseline and when applied to blocks of different heights, it's often unwanted.

应用 顶部 的值可以解决您的问题。这是一个工作小提琴： http://jsfiddle.net/PhilippeVay/B2S4r/3/ （因为没有样式表在你的小提琴，但只有内联CSS，我甚至不会尝试找到如何瞄准右边的那个）

Applying a value of top will solve your problem. Here's a working fiddle: http://jsfiddle.net/PhilippeVay/B2S4r/3/ (as there's no stylesheet in your fiddle but only inline CSS, I won't even try to find how to aim for the one on the right)

这篇关于第二个内嵌块div上方的空白区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！