如果我给一个line-height到一个块元件像h1它增加了上方和每个文本行的下方的空间,这意味着该元素不在相同顶部位置开始.如果我只想在每条线下面留一个间距怎么办？我知道vertical-align这只适用于内联元素.
我还认识到,p默认情况下,像标签这样的块元素的文本不在行高"普通"的顶部.如果我为元素添加背景颜色,则在文本上方几个像素处也可以看到颜色.为什么？
tim*_*fin 19
TLDR:使用position: relative和负顶值来伪造它.
说明:你说得对.始终在每个字符的上方和下方添加行高.因此,如果您的字体大小为12px并且您的行高为18px,那么您将获得3px以上,并且每行"3"以下3px.这些3px空间中的每一个都被称为"半导体".
但是,您可以使用position: relative负顶值使其看起来好像每行下面只添加了空格.
因此,假设您希望每行之间有8px的空间,而不是上面示例中的6px(18px/12px = 6px =顶部3px +底部3px).要做到这一点,将行高从18px增加到20px,使半前导4px,并在行之间总共提供8px的空间.然后添加position: relative; top: -2px以将线条撞回到线高为18px时的相同位置.
即使浏览器仍然在每行的上方和下方添加4px的空间,负向垂直定位将使得看起来额外的顶部间距被切断.