CSS - 是否可能“收缩包装”一个界限块到一个字体的帽子和基线？ [英] CSS - Is it Possible to "Shrink Wrap" a Bounding Block to a Font's Cap and Baseline?

问题描述

我有一些< h1> 和< p> 我想要文本的顶部（帽子的高度）和文本的底部（基线）与标签的边界块齐平。默认情况下似乎有一定量的间距，我不知道为什么。是否有计算来确定这个间距？

如果我修改元素的line-height和height属性，我可以实现我的后果，多行文本重叠的原始和理想的行高，并不是我们想要的。

右键点击此页上的< p> 标记，然后将鼠标悬停在开发者控制台中的元素上，注意文本的顶部/底部不与边界齐平元素的实际< p> 元素。

1. 是否可以使顶盖高度和基线与和元素的边界齐平？


2. 是否可以在CSS中编辑此间距？


3. 是否有规则/计算来确定此间距是多少？

$ b

http://html5doctor.com/html-5-reset-stylesheet/

如果您的容器是div

使用 display：inline; 到内部的元素。

I have some <h1> and <p> tags with text content. I'd like the top of the text (cap height) and the bottom of the text (baseline) to be flush with the tag's bounding block. By default there seems to be a certain amount of spacing and I don't know why. Is there a calculation to determine this spacing?

I can achieve what I'm after if I modify the line-height and the height properties of the element, but then the original and desirable line-height for multi-line text overlaps and isn't what we want.

Ex. Right-click a <p> tag on this page and hover the element in the dev console to notice that the top/bottom of the text isn't flush with the bounds of the actual <p> element.

1. Is it possible to make the cap height and baseline flush with and element's bounds?
2. Is this spacing possible to edit in CSS?
3. Is there a rule/calculation that determines what this spacing is?

解决方案

you want to use something called css reset block

http://html5doctor.com/html-5-reset-stylesheet/

and also if your container is a div

use display:inline; to wrap exactly onto the element inside.

这篇关于CSS - 是否可能“收缩包装”一个界限块到一个字体的帽子和基线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！