HTML/CSS：DIV，锚与下方空间

问题描述：

我们都熟悉的浏览器的恼人默认代理样式表之前，完整的信息。我们可能也熟悉恼人的锚点和图像标签，下面有空格。

因此，这里是我的问题：

HTML：

<div> 
    <a href="#"> 
     <img src="src"> 
    </a> 
    <a href="#"> 
     <img src="src"> 
    </a> 
    <a href="#"> 
     <img src="src"> 
    </a> 
</div>

我使用了一些社交图标用于测试目的，它看起来像这样：

我想锚是一个正方形，所以在我的CSS我简单说a { display: inline-block; }

但是现在有图像下方的空白，所以在我的CSS我说img { display: block }

现在，所有带锚标记和图像标记的东西似乎都很好，但是...

现在div内有空白，没有任何证据表明它是锚标记或图像标记。

你可能会想： “嗯，这很容易只是说在你的CSS div { font-size: 0 }。”那么会导致另一个问题：div不能很好地测量高度。它切片关闭顶部的一个像素：

因此，如果有任何修复：我会怎么解决这个问题没有丑陋的修复，如：padding-top: 1px或margin-bottom: ...px

如果有没有修复：这将是不可思议的

@caramba你读？ –

css => a img {display：inline-block} – Roy

伙计，请仔细阅读 –

答

尝试添加a { float:left }或a { vertical-align: middle }

这很有趣，现在它切断顶部**上的1个像素，并且**它仍然在内部有空白div tag –

@DerkJanSpeelman尝试更新 – William

'a {float：left}'确实可以做到这一点，尽管我需要将它包装在另一个div标签中，以使用'text-align：center'将图标对齐到中心，但是这个确实有效。 '一个{vertical-align：middle}'也适用，我发现 –

答

Flexbox的工作很好。

div, a { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
a:not(:last-child) { 
 
    margin-right: 1em; 
 
}

<div> 
 
    <a href="#"> 
 
    <img src="http://placehold.it/100"> 
 
    </a> 
 
    <a href="#"> 
 
    <img src="http://placehold.it/100"> 
 
    </a> 
 
    <a href="#"> 
 
    <img src="http://placehold.it/100"> 
 
    </a> 
 
</div>

谢谢你的帖子，但当我打开devtools时，我可以看到anchor标记内有一个空格。所以这不是一个修复 –

比我们使用嵌套的flexbox。没有更多的空白 – Gerard

HTML/CSS：DIV，锚与下方空间

相关推荐