如何解决段落周围的空白
我的段落有问题。我得到保证金:0,填充:0;在所有CSS中,但在我的文本周围仍然有这个奇怪的地方。
这是我的代码:
.advices_container_header span {
margin: 0;
padding: 0;
}
.advices_container_header p {
margin: 0;
padding: 0;
}
.advices_container_header_advices {
display: block;
margin: 0;
padding: 0;
font-family: Open Sans;
font-size: 56px;
color: rgba(255,96,1);
}
.advices_container_header_advices p {
margin: 0;
padding: 0;
}
.advices_container_header_text {
display: block;
margin: 0;
padding: 0;
font-family: Open Sans;
font-size: 18px;
color: rgba(107,107,1);
}
.advices_container_header_questionMark {
margin: 0;
padding: 0;
font-family: Open Sans;
font-size: 48px;
color: rgba(255,1);
}
<div class="advices_container_header">
<p class="advices_container_header_advices">Wskazówki</p>
<p class="advices_container_header_text">Jak przygotować się do przeprowadzki<span class="advices_container_header_questionMark">?</span></p>
</div>
我对网站上的其他文字没有任何疑问,这就是为什么这对我很奇怪。
解决方法
我认为您可以使用line-height来修复它,但是我猜它默认是正确的,我也会使用*标签,并将padding和margin设置为0,而不是将其复制到各处,而是使用*标签所有HTML元素顺便说一句。
,您可以强制行高与字体大小相同,并删除所有多余的空白,边距和字体系列:
* {
margin: 0;
padding: 0;
font-family: "Open Sans";
}
.advices_container_header_advices {
display: block;
font-size: 56px;
line-height: 56px;
color: rgba(255,96,1);
}
.advices_container_header_text {
display: block;
font-size: 18px;
line-height: 18px;
color: rgba(107,107,1);
}
.advices_container_header_questionMark {
font-size: 48px;
line-height: 48px;
color: rgba(255,1);
}
,
那是正常的。每一行文字都有一个行高:
行高是文本行之间的垂直距离。在 网络上,一行上的文本上方和下方的空间相等。
在CSS中,line-height属性可以采用数字或百分比 价值观。如果未指定或继承line-height值,则 默认情况下,行高是正常的。通常比大约大20% 字体大小。
所以正确的答案是将行高设置为80%。但是,对于您在示例中给出的字体,似乎80%不够。根据您要剪下的字体,字体的比例应约为70-72%。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.advices_container_header span {
margin: 0;
padding: 0;
}
.advices_container_header p {
margin: 0;
padding: 0;
}
.advices_container_header_advices {
display: block;
margin: 0;
padding: 0;
font-family: Open Sans;
font-size: 56px;
color: rgba(255,1);
line-height: 72%;
}
.advices_container_header_advices p {
margin: 0;
padding: 0;
}
.advices_container_header_text {
display: block;
margin: 0;
padding: 0;
font-family: Open Sans;
font-size: 18px;
color: rgba(107,1);
}
.advices_container_header_questionMark {
margin: 0;
padding: 0;
font-family: Open Sans;
font-size: 48px;
color: rgba(255,1);
}
<div class="advices_container_header">
<p class="advices_container_header_advices">Wskazówki</p>
<p class="advices_container_header_text">Jak przygotować się do przeprowadzki<span class="advices_container_header_questionMark">?</span></p>
</div>
如果您打算将其用作徽标。我建议您改用SVG图片。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。