下面的代码在某些文本和之间添加了一些文本之间的额外空间。
为什么<br>
和some text
之间的again some text
元素的高度不是0。我尝试了line-height: 0
和height: 0
。
第二个span
元素的文字未采用20px行高,为什么?
注意:请不要告诉如何解决问题。我只想知道为什么line-height
以inline
这样的span
元素运行。
.container {
border: 1px solid black;
}
.one {
line-height: 12px;
font-size: 10px;
vertical-align: top;
}
.two {
line-height: 20px;
vertical-align: bottom;
font-size: 10px;
}
br {
line-height: 0;
height: 0;
display: block;
}
<div class="container">
<span class=one>
some text <br>
agian some text <br>
</span>
<span class="two">
hip hop
</span>
</div>
答案 0 :(得分:0)
span
是display:inline
元素,您可能需要display: inline-block
才能看到您的更改。
检查以下内容:
.container {
border: 1px solid black;
}
.one {
display: inline-block;
line-height: 12px;
font-size: 10px;
vertical-align: top;
background-color: grey;
}
.two {
display: table-cell;
height: 30px;
vertical-align: bottom;
font-size: 10px;
background-color: red;
}
br {
line-height: 0;
height: 0;
display: block;
}
<div class="container">
<span class=one>
some text <br>
agian some text <br>
</span>
<br>
<span class="two">
hip hop
</span>
</div>
答案 1 :(得分:0)
您可以通过在内容中添加适当的标记来改进代码
<div>
<p class='one'>
<span >
- Text Content</span>
<span >
- Text Content</span>
</p >
<p class='two'>
<span>
- Text Content</span>
</p>
</div>
并在.one
display:block
和margins
答案 2 :(得分:-2)