段落周围的空白

问题描述

我的段落有问题。我得到保证金：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图片。