Menu
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/ (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> 
841
Creating extra spaces before or after text To create extra spaces before, after, or in-between your text, use the (non-breaking space) extended HTML character.
You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space. However, this is a bad way to do what you want to do. You should float the elements if thats what you want to do.
That solution, however, ignores why that space is being added. The inline-block display property treats block level elements (e.g. <div> ) as an inline element (e.g. <span> ), and, just like if you had a line break between two <span> elements, the line-break between the <div> s is creating a space between the <div> s.
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)
138
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
