繁体   English   中英

增加标题和段落之间的空间

[英]Increase Space between Headings & Paragraphs

如果您在Snippet下运行,则可以看到标题和段落之间有很多空间

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

删除margin并在p tag上添加line-height

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

尝试在下面的代码中查找标题和段落之间以及每个单词之间的空间:

 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> 

要增加“标题和段落”之间的空间,可以使用br :)

为了增加每个单词之间的空间,您必须使用CSS样式

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM