0

On setting the inner div to inline-block, it renders slight below that of a block. Why is that ?

http://jsfiddle.net/Sb9Wb/

<div class="outer">
<div class="inner">
    <p> This is a inner div</p>
    <p>Height set to 100%</p>
    <p>Why it renderes slightly below when set to inline-block that of a block?</p>
</div>

Please try setting the inner div as block and see the difference!

And the same inline-block adds a scrollbar here http://jsbin.com/kabom/1/edit

Just because, a class below is added to a div!

.sapUiView {
display: inline-block;
}
ikiw
  • 372
  • 1
  • 4
  • 17

1 Answers1

1

That space you are actually seeing is caused by the "p" margin that becomes visible when you add the inline-block property.

Try adding 

 margin:0;

to the first child of p like so:

http://jsfiddle.net/Sb9Wb/2/

arocketman
  • 1,134
  • 12
  • 21
  • "Becomes visible" may be better described as "not condensed as per normal rules" because the `inline-block` defines a new margin context. – Niet the Dark Absol Apr 18 '14 at 10:16
  • Thanks Andrew! But can you check why it adds a scrollbar here http://jsbin.com/kabom/1/edit for the same reason ! – ikiw Apr 18 '14 at 10:24