Student Student - 1 month ago 19
CSS Question

Inline p tags inside div

I am trying to display 3 inline p tags inside a div container but I have problem when I change the font size of one p tag. Do I need to adjust the line-height of p tag or is there a universal command?

Also, is there any way except using margin-left or right to put a space between p tags?

jsfiddle

.container{
width:200px;
padding:10px;
display:inline;
}

.one{
float:left;
font-size:25px;
}

.two{
float:left;
}

.three{
float:left;
}


<div class="container">
<p class="one">
sentence one
</p>
<p class="two">
sentence two
</p>
<p class="three">
sentence three
</p>
</div>

Answer

Do not use float to set inline elements. Use display:inline;

.one{
  font-size:25px;
}
.container p {
  display:inline;
}

Working DEMO.

BUT I suggest you to avoid p for inline elements, use span instead that are build for that.

The HTML <span> element is a generic inline container for phrasing content

Workind DEMO.