问题标签 [line-height]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
54 浏览

html - 使用 line-height: 100% 是错开元素而不是使它们在高度上匹配

如果这很难理解,我深表歉意。

我挑战自己只使用 CSS 和 HTML 来构建这个网站,以提高我的 CSS 技能。我遇到了一个有两行的路障,每行包含三个“卡片”元素。这些卡片到处都是高度,我无法找到解决方案来修复它。我添加了以 px、em 和 % 值定义的行高。我无法以 px 定义卡片的高度并仍然保持响应,因此我以 % 定义了它。高度:100% 会导致卡片溢出和错开,即使没有足够的内容来证明该行为是正确的。中间卡的底部下降,右侧的两个重叠。我已经尝试过 max-height: 100% 以防止它们溢出,但这并没有起到任何作用,因为内容不需要它们中的任何一个自行溢出。我试过最小高度:100% 但这给了我同样的身高问题:100%。我知道我一定在这里遗漏了一些东西(这可能是显而易见且非常简单的东西),但我不知道它是什么。

片段

0 投票
0 回答
109 浏览

html - 为什么设置了行高并且具有较小字体的跨度时,标题的高度较大?

这是我的代码:

有四个divs。每个div都有一个h1和一个span嵌套在h1. 只有line-heightfont-size样式与此问题相关。其他样式仅用于可视化问题。这里是重点,

  1. div.a是一个普通的div。这里没有line-heightor的样式font-size
  2. div.b只有款式h1才有line-height: 1.2
  3. div.c只有款式span才有font-size: small
  4. div.dh1拥有line-height: 1.2span拥有的风格font-size: small

为什么标题div.d的高度比其他标题高?

0 投票
2 回答
44 浏览

html - 将图像设置为与没有默认行高的文本相同的行

如果我的文本没有默认的 line-height 值,并且我有向左或向右浮动的图像,那么看起来图像不是从与文本相同的行开始的。我能做些什么吗?我知道我可以为图像添加一些上边距,但这是手动工作。我有数百个图像和文本章节,这个问题无处不在。我的问题在这里演示:https ://codepen.io/shnigi/pen/VwKmYPb看起来图像开始在文本上方。

0 投票
0 回答
38 浏览

html - line-height on 的错误继承