nick nick - 7 months ago 66
HTML Question

css display:block and its opposite

To separate one line of text onto two lines I am using:

<p>Line one <span>line two</span></p>
p span {
display:block
}


But on the mobile version of my page I would like to remove that block on the element so that it displays all on one line. Is there an opposite of display:block? Am I using the correct approach to accomplish this?

Answer

If you want them to be in one line but still blocks/boxes (so to have width and height) use this:

display:inline-block;

If you want them to be replaced as text (so as sequence of characters) then use

display:inline;

By default span elements have display:inline; styling.