白色space段落周围

Question

我遇到了段落问题。我得到边距：0，填充：0；在所有 CSS 中，但我的文字周围仍然有这种奇怪的白色 space。

这是我的代码：

 .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,0,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,107,1);
         }

         .advices_container_header_questionMark {
             margin: 0;
             padding: 0;
             font-family: Open Sans;
             font-size: 48px;
             color: rgba(255,96,0,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>

我对网站上的其他文本没有任何问题，这就是为什么这对我来说很奇怪。

Answer 1

我认为你可以用 line-height 修复它，但我猜它是正确的默认值，我也会使用 * 标签，并将填充和边距设置为 0，而不是将其复制到任何地方， * 标签针对所有 HTML 元素 btw.

Answer 2

您可以强制 line-height 与您的 font-size 相同，并删除所有多余的边距、填充和 font-family:

* {
    margin: 0;
    padding: 0;
    font-family: "Open Sans";
}

.advices_container_header_advices {
    display: block;
    font-size: 56px;
    line-height: 56px;
    color: rgba(255,96,0,1);
}

.advices_container_header_text {
    display: block;
    font-size: 18px;
    line-height: 18px;
    color: rgba(107,107,107,1);
}

.advices_container_header_questionMark {
    font-size: 48px;
    line-height: 48px;
    color: rgba(255,96,0,1);
}

Answer 3

这很正常。每行文本都有一个 line-height:

Line-height is the vertical distance between lines of text. On the web, it is an equal amount of space above and below text on a line.

In CSS, the line-height property can take numeric or percentage values. If no line-height value is specified or inherited, the line-height by default is normal. It usually is about 20% larger than the font size.

所以正确的答案是将 line-height 设置为 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,96,0,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,107,107,1);
}

.advices_container_header_questionMark {
  margin: 0;
  padding: 0;
  font-family: Open Sans;
  font-size: 48px;
  color: rgba(255,96,0,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 图片。

白色space段落周围

White space around paragraphs

html

css

paragraph