Космические линии вертикально

Question

У меня есть три строки текста, я хочу, чтобы пространство равномерно рядом с коробкой height=100px; (изображение на самом деле)

Что я могу сделать, что будет делать это автоматически? Или мне нужно рассчитать высоту линии и изменить padding s margin s line height s и font sizes?

Answer 1

Мое решение включает в себя высоту элемента, содержащего ваши строки текста. Поскольку ваш блок равен 100px, вы хотите, чтобы блок, содержащий текст, также был 100px. Это также может быть три отдельных блока, которые составляют до 100 пикселей.

Вот два отдельных решения, которые работают.

HTML:

<div class="box1">box1</div> 
<p class="p1">This is line 1.<br> 
This is line 2.<br> 
This is line 3.</p> 

CSS:

.p1 { 
    margin: 0; 
    padding: 0; 
    height: 100px; 
    line-height: 33px; 
    background-color: silver; 
} 
.box1 { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    float: left; 
} 

HTML:

<div class="box2">box2</div> 
<p class="p2">This is line 1.</p> 
<p class="p3">This is line 2.</p> 
<p class="p4">This is line 3.</p> 

CSS:

.p2, .p3, .p4 { 
    margin: 0; 
    padding: 0; 
    height: 33.3px; 
    line-height: 33.3px; 
    background-color: silver; 
} 

.box2 { 
    background-color: green; 
    width: 100px; 
    height: 100px; 
    float: left; 
} 

Demo at CodePen

Во втором решении (отдельные блоки) вы можете оставить линию линии, и первая строка текста будет выровнена с верхней частью коробки, а остальные линии будут расположены равномерно под ней.

Answer 2

Вы можете применить line-height, что на одну треть изображение height.

img { 
    height: 100px; 
    vertical-align: middle; 
} 
.text { 
    vertical-align: middle; 
    display: inline-block; 
    max-width: 300px; 
    line-height: 33.33px; 
} 

http://jsfiddle.net/myajouri/Nk5Hj/