Why doesn't my div inside a span work properly?

Question

I\'m writing the following HTML markup:

 Some Text
    
татата

and s

Answer 1

span display:inline you must set it display:inline-block
but this not standard you must use div span always use for text your fiddle demo

Answer 2

span is an inline-element, while div ist not. you should consider swapping them..

Answer 3

By default div's is a block element and span is an inline element. Block elements always flow vertically and inline elements always flow next to each other from top left to the bottom right depends on screen width. We can use inline elements under the block element, not vice versa. If we override we expect to see some issues like this on responsive layout.

Answer 4

span is an inline element so it will not take notice of your height and width. For this you need to give it either:

display:block; or display: inline-block

Answer 5

Your markup is incorrect ( plus missing semi-colon as quoted by Steini, mentioning this for sake of completeness of answer )

Answer 1 : span is an inline element, so having a div inside span is a bad idea, also, it would be better, if you nest span inside span and give inner span display:block property!

Answer 2 : add display:block to span to change the default behavior

working fiddle with correct markup

fiddle with the layout you wanted

Answer 6

First answer: You forgot the semi-colon after height style, that's why it is not rendered.

Second answer: If you look closely, the border appears after the div. This is because you are inserting block level element inside inline element. So, block level element takes it to the next line and then it takes the whole line. On the very next line you can see the right border for the span.

It is bad practice to put block level element inside inline element. In fact, I do not see any practical use of this kind of structure. Please, correct it if you are learning.