代码之家  ›  专栏  ›  技术社区  ›  Daniel Williams

移除H(标题)标签的顶部/底部填充

  •  0
  • Daniel Williams  · 技术社区  · 6 年前

    h1 {
      outline: 1px solid red;
      padding: 0px;
      margin: 0px;
    }
    <h1>hello world</h1>
    3 回复  |  直到 6 年前
        1
  •  0
  •   Johannes    6 年前

    您已经删除了顶部和底部的填充和边距。您在示例中看到的字母上方和下方的空间是由线条高度造成的(默认设置取决于浏览器)。您可以通过添加不同的设置来减少这一点,但请始终记住,某些字母需要上下空格,这也取决于使用的字体,这些字体所需的垂直空格量可能有所不同:

    h1 {
      border: 1px solid green;
      padding: 0px;
      margin: 0px;
      line-height: 100%;
    }
    <h1>hello - mind letters like these: jQÜØgpÄy</h1>
        2
  •  0
  •   Temani Afif    6 年前

    你需要调整 line-height 如果你说的是文字上下的空格。只需注意,因为这是字体特定的,所以您可能需要一个不同的值 另一个字体系列

    h1,h2,h3 {
      outline: 1px solid red;
      padding: 0px;
      margin: 0px;
      line-height: 0.7;
    }
    <h1>hello world</h1>
    <br>
    <h2>hello world</h2>
    <br>
    <h3>hello world</h3>