在第二行内联块div之上的空格

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.

我肯定我在这里漏掉了什么，但不能解决它。在第二个inline-block div上面有空格，只有当右div中的“text here”长度小于左div时才会出现这种情况。

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

jsFiddle: http://jsfiddle.net/B2S4r/2/

<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>​

5 个解决方案

#1

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

垂直对齐的默认值是基线，当应用于不同高度的块时，通常是不需要的。

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)

运用高层的价值会解决你的问题。这里有一个工作的小提琴:http://jsfiddle.net/PhilippeVay/B2S4r/3/(由于您的小提琴中没有样式表，只有内联CSS，我甚至不会尝试找到正确的方法)

#2

This appears to be a better, cleaner solution: (Example)

这似乎是一个更好、更干净的解决方案。

<div class="box">
    <hgroup>
        <h2>Title</h2>
        <h3>Subtitle</h3>
    </hgroup>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
        quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
        Aenean.</p>
</div>

<style type="text/css">
    .box {
        border-top:    1px dashed black;
        display:       inline-block;
        width:         250px;
        margin-bottom: 10px;
        margin-right:  10px;
        margin-top:    0;
    }

    .box hgroup {
        height:         50px;
        padding-top:    2px;
        padding-bottom: 2px;
        text-align:     right;
        font-size:      11px;
        border-left:    100px rgb(205, 205, 205) solid;
    }

    .box h2 {
        font-size:   21px;
        margin:      0;
        font-weight: normal;
    }

    .box h3 {
        font-weight: normal;
    }

    .box p {
        background-color: #efefef;
        height:           75px;
        padding:          5px;
        font-size:        12px;
    }
</style>

#3

a quick solution is adding a float:left to both divs...

一个快速的解决方案是添加一个浮点数:留给两个div…

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

(and please use css ;) )

(请使用css;)

#4

I tried pasting html for 1st block in next one and it worked w/o problem.

我尝试粘贴html为第1块在下一个，它工作的w/o问题。

<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 here Text here Text here Text here Text here Text here Text here Text here Text here
    </div>
</div>

You can see updated fiddle here: http://jsfiddle.net/B2S4r/6/

您可以在这里看到更新的小提琴:http://jsfiddle.net/B2S4r/6/

#5

If you add float:left to both divs, your problem will be resolved.

如果您添加float:留给两个div，您的问题将得到解决。

HTML:

HTML:

<div class="article">
    <div class="header">
        <div class="grayBox"></div>

        <span class="main_header">Title</span><br />
        Subtitle
    </div>

    <div class="content">
        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 class="article">
    <div class="header">
        <div class="grayBox"></div>

        <span class="main_header">Title</span><br />
        Subtitle
    </div>

    <div class="content">
        Text here Text here Text here Text here Text here Text here Text here Text here Text 
    </div>
</div>​

<div class="clear"></div>

CSS:

CSS:

.article {
    border-top: 1px dashed black; 
    display: inline-block; 
    width: 250px; 
    margin-bottom: 10px; 
    margin-right: 10px; 
    margin-top: 0;
    float:left;        
}

.header {
    height: 50px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    text-align:right; 
    font-size: 11px;    
}

.main_header {
    font-size: 21px; 
    margin: 0;   
}

.grayBox {
    display: block; 
    width: 80px; 
    height: 50px; 
    float: left; 
    background-color: #cdcdcd; 
    background-position: left center;    
}

.content {
    display:block; 
    background-color: #efefef; 
    height: 75px; 
    padding: 5px; 
    font-size: 12px;
}​

.clear {
    clear:both;
}​

Live DEMO

现场演示