[英]Using span tag in JavaScript to modify contents inside html <p> tags
[英]Get rid of space inside p tag when using a span tag
如何将我的跨度直接放在p标签内的文本下方
这是小提琴
http://jsfiddle.net/bobbyfrancisjoseph/H4U7r/
我也在这里粘贴HTML代码
<p class="now-p" style="color:#000;">IN THEATERS NOW
<br>
<span style="font-size:13px;"> Trailers,Songs,Ratings,Reviews & Comments</span>
</br>
</p>
CSS如下。
.now-p {
padding-bottom:10px;
margin-bottom: 0px;
color:#91979e;
text-align:left;
font-size:36px;
font-weight:bold;
}
我试图使输出看起来像这样:
IN THEATERS NOW
Trailers,Songs,Ratings,Reviews & Comments
现在在IN THEATERS之后有一个空间。 我无法摆脱这种情况
尝试删除您的中断标记并将其添加到您的CSS:
.now-p span{
display:block;
font-size:13px;
}
space
是由于<p>
下的行中的<br>
。 如果您IN THEATERS NOW<br/>
没有空格,请不要再有问题了。
这可能不是实现您想要的最佳方式。 但我希望这有助于理解你遇到问题的原因。
跨度位于文本的正下方,它是文本第一行的行高,它导致行之间的间距。
设置第一个文本的行高以将它们组合在一起。 (并且您可以使用填充来缩进第二行而不是空格。)
HTML:
<p class="now-p" style="color:#000;">
<span class="header">IN THEATERS NOW</span>
<br>
<span class="text">Trailers,Songs,Ratings,Reviews & Comments</span>
</p>
CSS:
.now-p {
padding-bottom:10px;
margin-bottom: 0px;
color:#91979e;
text-align:left;
font-weight:bold;
}
.now-p .header {
font-size: 36px;
line-height: 35px;
}
.now-p .text {
font-size: 13px;
padding-left: 40px;
}
演示: http : //jsfiddle.net/H4U7r/2/
使用CSS line-height
.now-p {
line-height: 15px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.