CSS display as inline-block, background-color property doesn't cover the content

Question

The background-color property on the elements with display:inline-block doesn't change the background-color of content.

I know if we make display:block - the element respect the width and height and covers the width of the container If the element is display:inline - the element height and width is of the content. As per my understanding, with display: inline-block, the element should respect width and height but If content overflows the given height, background-color property should spans the content to behave as inline element. In the code background-color property should span through the content of Span3 and Span4 but it doesn't. Also, to add to the question If I add vertical-align: top to span3 and span4 they aligns but if not then Span3 doesn't align. I read that inline elements align wrt to the baseline but in this case they are not wrapped in any element.

https://jsfiddle.net/ankita7/vah5xqe9/45/

<span class="span3">
    Span3 - To make inline element behave like both inline and block element. i.e. align side by side and respect the width and height property. 
    use display: inline-block to the inline element.  
    inline elements aligns themselves with respect to the baseline of the rightmost element. To align their top use vertical-align: top property
  </span>

<span class="span4">
    Span4 - Both span3 and span4 now behaves as inline and block elements
    Span3 - To make inline element behave like both inline and block element. i.e. align side by side and respect the width and height property. 
    use display: inline-block to the inline element.  
    inline elements aligns themselves with respect to the baseline of the rightmost element. To align their top use vertical-align: top property
  </span>
</code>

<code>
.span3,
.span4 {
  background-color: orange;
  width: 300px;
  height: 200px;
  display: inline-block;

}

Does the height property for the inline-block element is behaves like a block element and not inline element? Do we always use vertical-align property to align the inline-block elements or is there any exception to that ?

.h1 {
  background-color: pink
}

.p1 {
  background-color: grey;
}

.span1 {
  background-color: black;
  color: white;
  width: 100px;
  height: 200px;
}

.span2 {
  background-color: yellow;
}

.p2 {
  background-color: green;
  display: inline;
}

.p3 {
  background-color: lightblue;
  width: 200px;
  height: 300px;
  display: block;
}

.span3,
.span4 {
  background-color: orange;
  width: 300px;
  height: 200px;
  display: inline-block;
}

<h2 class="h1">
  h2 = Block and Inline-Block
</h2>
<p class="p1">
  p1 = This is block element. Block elements height is equal to their content height but they take whole width of the container.
</p>
<span class="span1">
    Span1 =This  is inline element. For inline elements width and height is equal to content's width and height. If you put width or height property on the element that doesn't apply to the element. 
    See the background-color: black doesn't take the width of the container.
  </span>
<span class="span2">
    Span2 = inline elements aligns side by side from left
  </span>
<p class="p2">
  P2 = To make block element behave like inline element i.e. make them align side by side. add display: inline; property to the block element.
</p>
<span class="p3">
    P3 - To make inline element behave like a block element. i.e. respect the width and height property. add display: block property to the inline element.
  </span>
<br/>
<span class="span3">
    Span3 - To make inline element behave like both inline and block element. i.e. align side by side and respect the width and height property. 
    use display: inline-block to the inline element.  
    inline elements aligns themselves with respect to the baseline of the rightmost element. To align their top use vertical-align: top property
  </span>

<span class="span4">
    Span4 - Both span3 and span4 now behaves as inline and block elements
    Span3 - To make inline element behave like both inline and block element. i.e. align side by side and respect the width and height property. 
    use display: inline-block to the inline element.  
    inline elements aligns themselves with respect to the baseline of the rightmost element. To align their top use vertical-align: top property
  </span>

Answer 1

You cannot change height of inline elements. Also you cannot use margin-top, margin-bottom with inline elements. If you change inline element to inline-block, it behaves like inline but with height and margin-top margin-bottom. to align them use vertical-align. and don't forget about space between your elements in html. In the example width of first and second div equals to wrap. but we have a problem because of text node (space). just comment space between first and second <div class="first"></div><!-- --><div class="second"></div>. But best idea is to use flex or grid and forget about inline-block

.wrap {
			width: 600px;
			height: 600px;
			background-color: green;
		}
.first, .second {
      width: 300px;
      height: 600px;
      display: inline-block;
      background-color: red;
}

<div class="wrap">
		<div class="first"></div>
		<div class="second"></div>
</div>