mrg mrg - 1 year ago 44
HTML Question

Div followed by Para in the same line


<div style="width:10px;height:10px;border:1px solid #F00;background:red;"> </div> <p> Red </p>
<div style="width:10px;height:10px;border:1px solid #00F;background:blue;"> </div> <p> Blue </p>

In the above code I expect two square box followed by the color name in different line. But it gives the box in one line and the para in
another line. How to achieve this in the same line like

[] Red
[] Blue

Answer Source

For a quick fix just add this to your CSS:

  display: inline-block;

This way will change properties of all your div and p elements.

Usually you would assaign classes to elements so you can target them from one place and only target them.