The height of the CSS block-level element is not set, and there is a default spacing between the vertical direction of the text and the border.
there is a text in the header H1, the height of the text font-size:62px,h1 is not set, and there is a gap between the text displayed in chrome and the upper and lower borders of H1. How does this gap come from and how should it be disposed of?
tried to make the line-height:1, spacing smaller, but did not disappear
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;
}
What is said on the third floor of
is correct, and there must be a default spacing. If you want to eliminate this kind of line, it is also very simple. The general designer will give you the height of the font and set the height of the line-height= font.
it is best to post a screenshot. In general, the spacing that appears after the text is set 1 times the height of the line is already very small and negligible. I don't know what the effect looks like on your page now
`
.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;
}
`
you can put a span tag in H1. This comes with the tag, but visually speaking, it must be better to have a certain distance.
when you set line-height: 1; , in fact, the height of H1 is consistent with the font size 62px , and the spacing you say is caused by the font itself.
is equivalent to now that you have a 62x62 field box (Chinese, English for 31x62) in which you write, but your words are not written on the edge.
as shown in the figure: 1 figure is not set, 2 figure is set line-height:1
, even if it is set, it is not full.
,
Design your own fonts. Or turn down the line-height. There are differences between different fonts.
p{
padding: 0;
border-top: 1px solid;
border-bottom: 1px solid;
line-height: 0.8;
}
demo
as inline block elements?
