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

发布于 2022-09-07 23:46:59 字数 1264 浏览 14 评论 0

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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可爱暴击 2022-09-14 23:46:59

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

回复收藏 0

他夏了夏天 2022-09-14 23:46:59

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

回复收藏 0

祁梦 2022-09-14 23:46:59

    .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标签。这是标签自带的，但是就视觉而言肯定是有一定距离更好一些啊

回复收藏 0

早茶月光 2022-09-14 23:46:59

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

回复收藏 0

孤寂小茶 2022-09-14 23:46:59

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

未设置line-height:1

已设置

回复收藏 0

烂人 2022-09-14 23:46:59

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

<!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>

回复收藏 0

公布 2022-09-14 23:46:59

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

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

demo

回复收藏 0

浅沫记忆 2022-09-14 23:46:59

写成行内块元素呢？

回复收藏 0

~没有更多了~

关于作者

心的位置

暂无简介

0 文章

0 评论

22 人气

关注发私信

謌踐踏愛綪

文章 0 评论 0

关注

开始看清了

文章 0 评论 0

关注

高速公鹿

文章 0 评论 0

关注

alipaysp_PLnULTzf66

文章 0 评论 0

关注

热情消退

文章 0 评论 0

关注

白色月光

文章 0 评论 0

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

謌踐踏愛綪

开始看清了

高速公鹿

alipaysp_PLnULTzf66

热情消退

白色月光

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

謌踐踏愛綪

开始看清了

高速公鹿

alipaysp_PLnULTzf66

热情消退

白色月光

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。