user3736648 user3736648 - 12 days ago 5
HTML Question

Display HTML text on one line

I am coding an MVC 5 view, and I am after some text colored green, the same as the

class="text-success"
Bootstrap class on the same line as normal text.

Here is what I have coded currently:

Test Text: <p class="text-success">Yes</p>


This however, displays the green
"Yes"
on the next line down rather than on the same line as the
"Test Text:"
.

How can I display the text on one line?

Answer

That should do the trick :

<p>Test Text: <span class="text-success">Yes</span></p>

Explanation : <p> is a block element, hence displaying in its block taking the whole width (if not specified otherwise in the CSS), with a new line before and after. <span> is an inline element, taking only the width that's needed and not forcing any new line.

The difference between inline and block is a very important thing in HTML/CSS. You will also discover other values for the css display property, a very usefull one being inline-block that puts together some benefits of block and some others from inline.

Comments