问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

CSS 块级元素未设置高度，其内文字垂直方向与边框有默认间距

头像
ykeli
    613

    header中有h1，h1中有文字，文字font-size：62px，h1未设置高度，chrome中显示文字和h1的上下边框之间有间距，请问这个间距怎么来的，该怎么处理掉？

    尝试了设置line-height:1，间距变小，但未消失

    html:

    <!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ife911</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://fonts.font.im/css?family=Montserrat" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="ife911.css">
</head>
<body>
    <header>
        <h1>Hello World</h1>
    </header>
</body>
</html>

    CSS:

    .html{
    font-family: 'Montserrat';
}
*{margin: 0px;padding: 0px;border: 0px}
header{
    width: 1600px;
    margin: 0 auto;
}
header{
    background-image: url(./image/Background1.png);
    height:990px;
    background-repeat: no-repeat;
    overflow: hidden;
}
header h1{
    margin-top:207px;
    font-size: 62px;
    text-align: center;
    color: rgb(255, 255, 255);
    font-weight: normal;
    letter-spacing: 0px;
    border: 1px solid;
}
    Microsoftcsshtmlvisual-studio-codechromehtml5
    阅读 5.2k
    8 个回答
    得票最新
    头像
    灰喵
      1815
      ✓ 已被采纳

      3楼说的是正确的，这个肯定会有默认的间距，这种一行的如果要消除也很简单，一般设计师会给你字体的高度，设置line-height=字体高度，就可以了

      头像
      Sakura_
        512

        最好贴出截图，一般文字设置1倍行高后出现的间距已经很小可忽略不计了，不知道你现在页面上的效果是什么样子的

        头像
        earthaYan
          32412

          `

              .html{
        font-family: 'Montserrat';
    }
    *{margin: 0px;padding: 0px;border: 0px}
    header{
        width: 1600px;
        margin: 0 auto;
    }
    header{
        background-image: url(./img/bg.png);
        height:990px;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    header h1{
        display: block;
        margin-top:207px;
        font-size: 62px;
        text-align: center;
        color: rgb(255, 255, 255);
        font-weight: normal;
        letter-spacing: 0px;
        border: 1px solid;
    }
    span{
        display: block;
        margin: -15px auto;
    }

          `
          可以在h1里面放入一个span标签。这是标签自带的，但是就视觉而言肯定是有一定距离更好一些啊

          头像
          faima
            900119

            当你设置line-height: 1;时其实h1的高度已经和字体大小62px一致了，你所说的间距是又字体本身造成的。
            相当于现在你有一个62x62的田字格（中文，英文为31x62），你在里面写字，但你的字没有贴着边写。

            头像
            ykeli
              613

              如图：1图是未设置，2图是设置了line-height:1
              就算设置了还是没有顶满。。。。

              未设置line-height:1

              已设置

              头像
              代码牛
                1.5k919

                效果可以实现但,边距去不掉

                <!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ife911</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1{
border:1px solid #000;
}
span{
display: inline-block;
transform: translateY(15%) translateX(0%);
}
</style>
</head>
<body>
    <header>
        <h1><span>Hello World</span></h1>
    </header>
</body>
</html>

                实例

                头像
                liuyaqi
                  1514

                  自己设计字体吧。或者把line-height调小点。不同字体有差异。

                  p{
  padding: 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  line-height: 0.8;
}

                  demo

                  头像
                  小WY
                    1293916

                    写成行内块元素呢？

                    撰写回答
                    你尚未登录，登录后可以
                    • 和开发者交流问题的细节
                    • 关注并接收问题和回答的更新提醒
                    • 参与内容的编辑和改进，让解决方法与时俱进
                    推荐问题