h1元素到边界的距离在顶部和底部不同
[英]h1 element distance to border differs at top and bottom
问题描述
CSS: 
CSS：
h1 {
width: 25%;
margin: 11rem auto;
font-family: 'Baron Neue';
font-size: 4vw;
color: white;
text-align: center;
border-top: solid 2px white;
border-bottom: solid 2px white;
}
HTML: HTML：
<h1>POTJESMARKT</h1>
The h1 tag has <body> </body> as it's parent. h1标记的父项为<body> </body> 。
The problem is that the border on the top isn't attached to h1, while there's no padding there. 问题在于顶部的边框没有附加到h1，而那里没有填充。 What I would like eventually is about a 1rem padding between h1 and the border, at the top and bottom. 我最终想要得到的是关于h1与顶部和底部边界之间的1rem填充。 I could solve this by adding padding at the bottom of h1, but if I then resize my browser window, the distance from h1 to border isn't equal anymore on top and bottom. 我可以通过在h1底部添加填充来解决此问题，但是如果我调整浏览器窗口的大小，则h1到边框的距离在顶部和底部将不再相等。
3 个解决方案
解决方案1
0 2015-01-06 11:01:46
Solved it in an 'ugly' way: 以“丑陋”的方式解决了它：
I added padding-bottom: 1vw; 我添加了padding-bottom: 1vw;
This way, the padding scales together with h1, which makes it acceptable. 这样，填充与h1一起缩放，这使其可以接受。
解决方案2
0 2015-01-06 11:14:13
Seeing as (technically), it's working here: 从技术上看，它在这里工作 ：
html,body{background:red;} h1 { width: 25%; margin: 11rem auto; font-family: 'Baron Neue'; font-size: 4vw; color: white; text-align: center; border-top: solid 2px white; border-bottom: solid 2px white; }
<h1>POTJESMARKT</h1>
In which since I haven't actually got your font style installed, I believe your problem is with the font itself. 由于我实际上尚未安装您的字体样式，因此我认为您的问题出在字体本身上。 In order to 'fix' this you could; 为了解决这个问题，您可以；
- A: Find out the font's baseline margin (in px) and add the extra 'top' padding to your h1 element 答：找出字体的基线边距（以像素为单位），然后将额外的“顶部”填充添加到h1元素中
- B: Use a different/more common font B：使用其他/更常见的字体
- C: 'Guess' by adding some padding-bottom to your element. C：通过在您的元素上添加一些底部填充来“猜测”。
Just some points I would like to note: 请注意以下几点：
- Ensure you import your font (so that everyone can 'use' it (ie google fonts)) 确保您导入了字体（以便每个人都可以“使用”它（即Google字体））
- I wouldn't really be that keen on using vw and vh unless actually needed 除非确实需要，否则我不会真的热衷于使用大众和大众
- Again, personal preference would stop me from using 'rem' values, and either stick to em, px, or otherwise. 同样，个人喜好会阻止我使用“ rem”值，并坚持使用em，px或其他方式。
解决方案3
0 2015-01-06 12:58:34
Here is a semantic answer: Header fiddle 这是一个语义答案： 标题小提琴
html: 的HTML：
<h1><strong>Potjes market</strong><h1>
css: CSS：
h1 {
font-size:4em;
border:3px solid blacK;
}
h1 > strong {
position:relative;
bottom:0.1em;
}`
This pushes the text slightly up so that the border looks even above and below 这会将文本稍微向上推，以使边框看起来甚至在上下
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.