2016-08-19 209 views
0

如果您在代碼段下面運行,可以看到標題&段落之間有很大的空間。增加標題和段落之間的空間

裝置之間的 「1.訪問端口,控制和傳感器」 & 「所有情況」

但在現場,其顯示像下面的圖像:

enter image description here

所以我想增加「標題&段落之間的空間」。

此外想每個單詞之間增加空間&我想顯示像下面圖像:

enter image description here

<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>

回答

1

試試下面的代碼標題和段落,也每個單詞空間之間的空間:

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>

+0

謝謝,它工作正常..... – fresher

1

除去margin &上ptag

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

感謝您的支持,我知道這個解決方案的工作原理,但在某個地方,我錯過了它...... – fresher

0

要增加標題&段落之間」的空間,你可以使用BR :)

要增加每個單詞之間的空間,您必須使用CSS樣式

+0

* Br會跳過一條線,如果你想要一個小空間,你不能使用它 – RaiZer

+0

感謝您的支持.... – fresher