Why is my div within the range working correctly?

Question

I am writing the following markup HTML:

<span> Some Text
    <div id="ch"></div>
</span>

and styles:

span{
    border: 1px solid black;
    text-align:center;
    width: 300px;
    height: 300px;
    background: aqua;
}
#ch{
    width:100px;
    height:100px
    background: yellow;   
}

jsFiddle

• Why is the property heightnot applied to the element divthat is inside span, but the width is applied?
• Why is my right border missing span?

Answer 1

Your markup is incorrect (plus the missing spelling indicated by Steini mentioning this for completeness of answer)

1: span inline, div span - , , span span span display:block!

2: display:block span,

Answer 2

semicolon height: 100px < - this ; css

Answer 3

span display:inline display:inline-block
, div span

Answer 4

span - , . :

display:block; display: inline-block

Answer 5

span - , div ist . ..

Answer 6

: , .

: , div. , . , , . .

Bad practice is to place a block level element inside an inline element. In fact, I do not see any practical use of such a structure. Please correct this if you are studying.