Белое пространство над вторым встроенным блоком div

Question

Я уверен, что я кое-что забыл, но не могу это решить. Есть пробел над моим вторым встроенным блоком div, и это происходит только тогда, когда длина «текст здесь» в правом div меньше, чем в левом.

jsFiddle: http://jsfiddle.net/B2S4r/2/ (Вам нужно сделать вид 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 
    </div> 
</div>​ 

Answer 1

По умолчанию значение vertical-align является baseline и применительно к блокам разной высоты, это часто нежелательно.

Применяя значение top решит вашу проблему. Вот рабочая скрипка: http://jsfiddle.net/PhilippeVay/B2S4r/3/ (так как в вашей скрипке нет стилей, но только встроенный CSS, я даже не попытаюсь найти, как прицелиться вправо)

Answer 2

быстрое решение добавляет 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;))

Answer 3

Я попытался оклейки HTML для 1-го блока в следующей, и она работала без проблем.

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

Вы можете увидеть обновленное скрипку здесь: http://jsfiddle.net/B2S4r/6/

Answer 4

Если добавить float:left в обе дивы, ваша проблема будет решена.

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:

.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

Answer 5

Это, кажется, лучше, чище решение: (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>