and ...">
Geek Answers Handbook

50% of the embedded units are not displayed next to each other

Say I have

<span class="ib-half"></span> <span class="ib-half"></span>

and

 .ib-half { display: inline-block; width: 50%; }

I expect the two spaces to be displayed side by side, but they will not. There are no margins, indents or borders, so what's the problem?

+6
source share
4 answers

The actual problem is the space (new line) between the two elements. Since it is an element of the inline block, it registers the space, so it is 50% + space.

Some features:

 <span class='left'>Left</span><!-- --><span class='right'>Right</span>

or <span class='left'>Left</span><span class='right'>Right</span>

or

 <span class='left'>Left</span><span class='right'>Right</span>

or for me it probably makes the most sense for float: left; and change it to a display: block element. I believe that the nature of inline elements is to work just like text with some extra spatial information, so why hack when there is no reason?

+9
source

Setting the font size of the parent element to zero may be a fix.

HTML:

 <div class = "parent"> <span class="ib-half">Left</span> <span class="ib-half">Right</span> </div>

CSS

 span{ background:#bdbdbd; } .ib-half { display: inline-block; width: 50%; font-size:10px; } .parent { font-size: 0; }

Check out this script. http://jsfiddle.net/YpTMh/9/

For more options, see http://css-tricks.com/fighting-the-space-between-inline-block-elements/

+15
source

Good answer in css3:

 white-space: nowrap;

in the parent node and:

 white-space: normal; vertical-align: top;

in a div (or other) at 50%

Example: http://jsfiddle.net/YpTMh/19/

+5
source

Hope this helps

  <div> <span class="ib-half"></span> <span class="ib-half"></span> </div>​ div{ width:50%; display:block; } .ib-half { margin:0; display:inline-block; width: 49%; height:100px; }​

here I use the parent div and set its width and display property to lock. In the child block u, you can set the display property to an inline block, and if u wants an additional range to be added, you can add by decreasing the width of the span block 100 / (no: of blocks) -1. You can also use the float property to get the result.

0
source

More articles:


All Articles