Html 第二个内联块div上方的空白

我肯定我忽略了一些事情，但无法解决。我的第二个内联块div上面有空白，只有当右div中的“text here”长度小于左div时才会出现这种情况

jsFiddle：（您需要将HTML视图加宽，以便看到它们彼此并排）

标题


字幕
文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本
标题


字幕
文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本
​
垂直对齐的默认值为
基线，当应用于不同高度的块时，通常不需要该值

应用值
top将解决您的问题。这里有一个可用的提琴：（因为提琴中没有样式表，只有内联CSS，我甚至不会尝试找到如何瞄准右边的样式表）
一个快速解决方案是在两个div中都添加一个
float:left

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


...

（请使用css；）
我尝试在下一个块中粘贴第一个块的html，但没有问题

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


标题


字幕
文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本
标题


字幕
文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本在此文本

您可以在此处看到更新的fiddle:
如果您将
float:left
添加到两个div，您的问题将得到解决

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>

.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;
}​

这似乎是一种更好、更清洁的解决方案：（）


标题
字幕
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭斜颈
夸姆，封建主义者，别有用心者，临时法官，安特。不要让你的自由人坐在那里。
埃尼安

.盒子{
边框顶部：1px黑色虚线；
显示：内联块；
宽度：250px；
边缘底部：10px；
右边距：10px；
边际上限：0；
}
.box hgroup{
高度：50px；
垫顶：2件；
垫底：2件；
文本对齐：右对齐；
字体大小：11px；
左边框：100px rgb（205205205）固体；
}
.方框h2{
字号：21px；
保证金：0；
字体大小：正常；
}
.框h3{
字体大小：正常；
}
.方框p{
背景色：#EFEF；
高度：75px；
填充物：5px；
字体大小：12px；
}
首先，我要先去掉所有的内联css。很难看出到底发生了什么事。我明白了。我通常不使用内联css，但在找到正确的属性并将它们分开之前，似乎更容易使用它。我看不出问题和答案中给出的JSFIDLE之间有任何区别。它们看起来都一样。非常优雅的解决方案，我以前从未遇到过
hgroup
标签。希望我能接受>1个答案，谢谢。@sooper:hgroup是HTML5元素。这是一篇旧文章，但其他人在这方面遇到了障碍。不幸的是，hgroup已从规范中删除。
.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;
}​

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