Inline p tags внутри div

Question

Я пытаюсь отобразить 3 встроенных p тегов внутри контейнера div, но у меня есть проблема, когда я меняю font-size одного знака p. Нужно ли настраивать line-height тега p или есть универсальная команда?

Также существует способ, за исключением использования margin-left или margin-right, чтобы разместить промежуток между p тегов?

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 1

Не используйте float установить встроенные элементы. Используйте display:inline;

Работа DEMO.

НО Я предлагаю вам, чтобы избежать p для встроенных элементов, используйте span вместо этого будут строить для этого.

HTML-<span> элемент представляет собой общий встроенный контейнер для содержания фразировки

Workind DEMO.

Answer 2

Вы можете использовать display:inline-block, если вы хотите использовать p тег

Вот JSFiddle

но paolo.basso99 сказал, чтобы отобразить inline элементы, вы должны использовать span тег.

надеюсь, что это поможет.

Answer 3

Этот сценарий может быть достигнут с использованием CSS Flexbox. Чтобы сделать их одинаково разнесенными и вертикально центрированными, вам необходимо применить эти свойства CSS.

Посмотрите на код на jsFiddle.

Просто добавьте следующие свойства родительского элемента в вашем случае его .container

.container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}