问题标签 [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.
html - 使用 line-height: 100% 是错开元素而不是使它们在高度上匹配
如果这很难理解,我深表歉意。
我挑战自己只使用 CSS 和 HTML 来构建这个网站,以提高我的 CSS 技能。我遇到了一个有两行的路障,每行包含三个“卡片”元素。这些卡片到处都是高度,我无法找到解决方案来修复它。我添加了以 px、em 和 % 值定义的行高。我无法以 px 定义卡片的高度并仍然保持响应,因此我以 % 定义了它。高度:100% 会导致卡片溢出和错开,即使没有足够的内容来证明该行为是正确的。中间卡的底部下降,右侧的两个重叠。我已经尝试过 max-height: 100% 以防止它们溢出,但这并没有起到任何作用,因为内容不需要它们中的任何一个自行溢出。我试过最小高度:100% 但这给了我同样的身高问题:100%。我知道我一定在这里遗漏了一些东西(这可能是显而易见且非常简单的东西),但我不知道它是什么。
片段
html - 为什么设置了行高并且具有较小字体的跨度时,标题的高度较大?
这是我的代码:
有四个div
s。每个div
都有一个h1
和一个span
嵌套在h1
. 只有line-height
和font-size
样式与此问题相关。其他样式仅用于可视化问题。这里是重点,
div.a
是一个普通的div。这里没有line-height
or的样式font-size
。div.b
只有款式h1
才有line-height: 1.2
。div.c
只有款式span
才有font-size: small
。div.d
h1
拥有line-height: 1.2
和span
拥有的风格font-size: small
。
为什么标题div.d
的高度比其他标题高?
html - 将图像设置为与没有默认行高的文本相同的行
如果我的文本没有默认的 line-height 值,并且我有向左或向右浮动的图像,那么看起来图像不是从与文本相同的行开始的。我能做些什么吗?我知道我可以为图像添加一些上边距,但这是手动工作。我有数百个图像和文本章节,这个问题无处不在。我的问题在这里演示:https ://codepen.io/shnigi/pen/VwKmYPb看起来图像开始在文本上方。
html - 我无法删除段落上方和下方的空格
我无法删除网页顶部仅包含字母“I”的段落上方和下方的空格。
我已经尝试使用“margin”和“padding”属性删除它,但它没有改变。我也尝试过,对于属性“line-height”,值 1 以便行高与文本的大小完全匹配,并且它也不起作用。
}
css - CSS:带有溢出:隐藏和最大高度是行高的倍数,“隐藏”文本在 Chrome 和 Edge 中渗入视图
希望 Zoom = 100% 或者如果不是 Zoom = 90%,您可以运行以下代码段并在文本底部看到应该隐藏的第一行字母顶部的一小部分。在我的一台机器上,它以 100% 的缩放比例显示,另一台以 90% 的比例显示 - 而不是更大的缩放比例。我的机器分别是 Windows 10 家庭版和专业版。
我该怎么做才能没有这个问题?我在 Chrome 和 Edge 中都观察到了这个问题(但 FoxFire 中没有),使用您在代码段中看到的代码。
css - 当每个 line-height 不同时,如何在 flexbox 中垂直居中文本?
我水平有三个文本部分,每个文本都有不同的line-height
. 但是,它们应该垂直对齐。
但是,当我使用align-items
flex 时,它不起作用。还有其他解决方案吗?
html - 移动设备顶部的不同空间 - 如何修复?
我希望某些单词在标题上以背景颜色突出显示。所以我在我的标题中使用
在 CSS 中,我添加了:
在移动设备上,我遇到的问题是文本没有居中。顶部可见的背景较少。当我使用普通桌面上的任何浏览器检查该网站时,它看起来不错,但此时我正在使用移动设备查看该页面,但它是错误的。
这是它的样子:
问题
这是页面的链接
有人可以帮我解决这个问题吗?网络