为什么此h3 / a元素的底部有多余的空间？

Question

我正在编码一个网站，并且我有一个标头元素，其中包含带有一些文本的锚点。但是，由于某种原因，文本与h3 / a元素的顶部对齐，我无法使其垂直对齐或使h3适应文本。

h3元素SASS为：

h3
  font-family: "Bebas Neue Regular", sans-serif
  font-size: 60px
  font-weight: normal
  letter-spacing: 3px
  color: white

此外，这是问题的图片：

normalize.css和用户代理中还有另外两种样式：

h3 {
  display: block;
  font-size: 1.17em; //overridden
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold; //overridden
}

//the h3 inherits this
html { 
  line-height: 1.15;
}

关于行高，我尝试将其设置为1并建议使用0.8em，但是将它们添加到样式中时这些值没有区别。

这是当我尝试通过将line-height: 0.8em放在h3元素上来人为更改行高时发生的情况的图片。

Answer 1

看起来可能已设置了额外的line-height属性。您还能从chromes开发人员工具中添加计算样式的完整列表吗？

Answer 2

这里有character descenders的空格。如果需要，可以通过将行高缩小到自然值以下来调整line-height属性以将其删除。例如：

line-height: 0.8em;

Answer 3

我之前通过将class Vec { constructor(x = 0, y = 0) { this.x = x; this.y = y; } } class Rect { constructor(src) { this.pos = new Vec; this.vel = new Vec; this.image = new Image; this.image.src = src; this.rendered = false; } get left() { return this.pos.x; } get right() { return this.pos.x + this.image.width; } get top() { return this.pos.y; } get bottom() { return this.pos.y + this.image.height; } get render() { if (!this.rendered) { if (this.beforeRender()) { this.rendered = true; } } return this.image; } beforeRender() {} } class Player extends Rect { constructor() { super("https://cdn4.iconfinder.com/data/icons/spring-flat-colorful/2048/5683_-_Frog-256.png"); this.pos.x = 100; this.pos.y = HEIGHT - GROUND_Y - this.image.height; } beforeRender() { if (this.image.width && this.image.height) { this.image.width /= 2; this.image.height /= 2; return true; } return false; } } class Enemy extends Rect { constructor() { super("https://vignette.wikia.nocookie.net/scribblenauts/images/8/8d/Steel_Spike.png/revision/latest?cb=20130105173440"); this.image.width /= 4; this.image.height /= 4; this.pos.x = WIDTH; this.pos.y = HEIGHT - GROUND_Y - this.image.height; } beforeRender() { if (this.image.width && this.image.height) { this.image.width /= 4; this.image.height /= 4; return true; } return false; } } // setup const ctx = document.getElementById("canvas").getContext("2d"); let isOver = false; const WIDTH = 600; const HEIGHT = 400; const GROUND_Y = 50; const player = new Player; let enemies = []; const MAX_ENEMY = 3; let isJumping = false; const JUMP_STRENGTH = -450; const GRAVITY = 25; document.addEventListener("keydown", (e) => { if (e.keyCode === 38 && isJumping === false) { isJumping = true; player.vel.y = JUMP_STRENGTH; } }, false); let lastUpdate = 0; let random = Math.floor((Math.random() * 2501) + 1000); function update(dt, now) { // update player player.vel.y += GRAVITY; player.pos.y += player.vel.y * dt; if (player.bottom >= HEIGHT - GROUND_Y) { isJumping = false; player.pos.y = HEIGHT - GROUND_Y - player.image.height; player.vel.y = 0; } // create enemy if (now - lastUpdate > random) { lastUpdate = now; random = Math.floor((Math.random() * 2501) + 1000); enemies.push(new Enemy); } for (let i = 0; i < enemies.length; i++) { // update enemy enemies[i].vel.x = -300 - (now / 500); enemies[i].pos.x += enemies[i].vel.x * dt; if (player.right > enemies[i].left && player.left < enemies[i].right && player.bottom > enemies[i].top) isOver = true; if (enemies[i].right < 0) enemies.splice(i, 1); } } function draw() { // draw background ctx.fillStyle = "#000"; ctx.fillRect(0, 0, WIDTH, HEIGHT); // draw ground ctx.fillStyle = "#0f0"; ctx.fillRect(0, HEIGHT - GROUND_Y, WIDTH, GROUND_Y); // draw player ctx.drawImage(player.render, player.pos.x, player.pos.y, player.image.width, player.image.height); // draw enemy ctx.fillStyle = "#f00"; for (let i = 0; i < enemies.length; i++) { ctx.drawImage(enemies[i].image, enemies[i].pos.x, enemies[i].pos.y, enemies[i].image.width, enemies[i].image.height); } } // game loop const TIMESTEP = 1 / 60; let accumulator = 0; let lastRender = 0; requestAnimationFrame(loop); function loop(timestamp) { accumulator += (timestamp - lastRender) / 1000; lastRender = timestamp; while (accumulator >= TIMESTEP) { update(TIMESTEP, timestamp); accumulator -= TIMESTEP; } draw(); if (!isOver) requestAnimationFrame(loop); }属性更改为<!DOCTYPE html> <html> <head> <title>Jump_Over_It</title> <link href="css/default.css" rel="stylesheet" /> </head> <body> <canvas id="canvas" width="600" height="400"></canvas> <script src="js/main.js"></script> </body> </html>来解决此问题。

Answer 4

答案是您不能使用 CSS - 这种字体有些奇怪，这意味着它在内置字符下方有额外的空间。您可以在 Google 字体页面上看到：https://fonts.google.com/specimen/Bebas+Neue?preview.text=Tom%20D%20Chambers&preview.text_type=custom#about。

解决方案是使用没有此（不寻常）问题的其他字体。

Answer 5

它的字体因字体而异 您可以通过为属性设置line-height来解决此问题。