Увеличьте расстояние между заголовками и абзацами

Question

Если вы запустите снизу, вы можете увидеть, что между есть заголовки & Пункты.

Средства Между «1. Доступ к портам, управления и датчики» & «Все случаи»

, но в месте, его отображение, как показано ниже изображения:

так что я хочу увеличить пробел между «заголовками & Пункты.»

Кроме того, я хочу, чтобы увеличить пространство между каждыми словами & я хочу показать, как показано ниже изображения:

<div class="product-size-space-img"><img alt="" src="/media/wysiwyg/new-image.jpg" /></div> 
 
<div class="product-size-space-content"> 
 
    <b>1. Access to ports, controls and sensors</b> 
 
    <p>All cases we sell have access to all ports, buttons, camera and sensors, there won&rsquo;t be any interference with your phone censors. Fully compatible with regular charges and headphones.</p> 
 
    <b>2. Protect it from bumps and drops</b> 
 
    <p>This case is made of light, durable and slim material called polycarbonate, it is hard plastic with high impact resistance and low scratch resistance. It is flexible enough to snap on to your phone with ease and strong enough to protect it from&ensp;&ensp; bumps, scratches and accidental drops.</p> 
 
    <b>3.Lay-flat bezel raise lip </b> 
 
    <p>Raised lip around the sides of the case protects your screen from directly contacting surfaces on accidents drops.</p> 
 
    <b>4. High quality printing</b> 
 
    <p>Site1 name uses image transfer technologies which results high quality designs embedded right onto the surface of the phones cases, so there won&rsquo;t be any peeling off or wearing off or chipping on your case design.</p> 
 
</div> 
 
<div style="clear: both;">&nbsp;</div>

Answer 1

Try ниже код для пространства между заголовком и пунктом, а также каждого слова пространство:

p { 
 
    line-height: 25px; 
 
    margin: 15px 0; 
 
    word-spacing: 5px; 
 
}

<div class="product-size-space-img"><img alt="" src="/media/wysiwyg/new-image.jpg" /></div> 
 
<div class="product-size-space-content"> 
 
<b>1. Access to ports, controls and sensors</b> 
 
<p>All cases we sell have access to all ports, buttons, camera and sensors, there won&rsquo;t be any interference with your phone censors. Fully compatible with regular charges and headphones.</p> 
 
<b>2. Protect it from bumps and drops</b> 
 
<p>This case is made of light, durable and slim material called polycarbonate, it is hard plastic with high impact resistance and low scratch resistance. It is flexible enough to snap on to your phone with ease and strong enough to protect it from&ensp;&ensp; bumps, scratches and accidental drops.</p> 
 
<b>3.Lay-flat bezel raise lip </b> 
 
<p>Raised lip around the sides of the case protects your screen from directly contacting surfaces on accidents drops.</p> 
 
<b>4. High quality printing</b> 
 
<p>Site1 name uses image transfer technologies which results high quality designs embedded right onto the surface of the phones cases, so there won&rsquo;t be any peeling off or wearing off or chipping on your case design.</p> 
 
</div> 
 
<div style="clear: both;">&nbsp;</div>

Answer 2

удалить margin & добавить line-height на ptag

p { 
    line-height: 30px; 
    margin: 0; 
} 

Answer 3

Для увеличения пространства между «заголовками & пунктами, вы можете использовать бр :)

Чтобы увеличить расстояние между каждыми словами, вам нужно работать с стилем CSS