css display:block and its opposite

Question

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 1

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.

Answer 2

With opposite I assume you want to hide it? That'll be display: none; Making display none on the span will hide the whole line completely, though. Try it like this:

<p>Line one <br/>line two</p>   

And in the media query for mobile

p br { 
    display: none;
}

Answer 3

The display property specifies the display behavior & visibility of an element.

opposite of display block is

display : none; 

it used for deleting and recreating them.

You can also consider inline-block :

inline-block elements inline elements but they have a width and a height.