如何覆盖父元素的行高
行高是指行框的高度，它决定了行框中文本的垂直位置和间距。要覆盖父元素的行高，可以通过以下几种方式实现：
- 使用负边距（Negative Margin）：给子元素设置负的上边距和下边距，使其超出父元素的边界，从而达到覆盖父元素的行高的效果。例如：
<style>
.parent {
line-height: 1.5;
background-color: lightgray;
padding: 10px;
}
.child {
margin-top: -10px;
margin-bottom: -10px;
background-color: lightblue;
}
</style>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>- 使用绝对定位（Absolute Positioning）：将子元素设置为绝对定位，并设置top和bottom属性为0，使其覆盖父元素的行高。需要注意的是，父元素需要设置为相对定位（relative positioning）或绝对定位（absolute positioning）。例如：
<style>
.parent {
line-height: 1.5;
background-color: lightgray;
padding: 10px;
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
background-color: lightblue;
}
</style>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>- 使用伪元素（Pseudo-elements）：通过在父元素上使用伪元素，设置其content属性为空字符串，并设置display属性为block，使其生成一个空的块级元素，从而覆盖父元素的行高。例如：
<style>
.parent {
line-height: 1.5;
background-color: lightgray;
padding: 10px;
position: relative;
}
.parent::before {
content: "";
display: block;
height: 100%;
background-color: lightblue;
}
</style>
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>以上是三种常见的覆盖父元素行高的方法，根据具体的需求和布局，选择适合的方法即可。
相关·内容
2回答
我在更改子元素的行高时遇到了问题。我的目标只是将line-height重置为正常值，而不是使用其父对象的较高值。a{ line-height:100px; }所以我想把small的行高设为normal，但它不起作用。
浏览 8提问于2017-08-23得票数 2
回答已采纳
当我将鼠标悬停在父div上时，尽管设置了line-height: 3em !important", the child行-Height`从未改变。
浏览 11提问于2016-08-12得票数 0
回答已采纳
我试图将中左上角块中的概要文本的行间距改为单行行(不，我不是亚历山大·威尔士，只是一个随机的风扇)。文本在行间有相当大的间距，它看起来大约是双倍行距。注释掉身体中的两个线高会使间距更好，但我不知道为什么。
如果你知道这个问题的答案，我也会对你是如何得到这个答案感兴趣的。与普通代码不同的是，当我遇到CSS问题时，我不
浏览 1提问于2020-04-30得票数 0
回答已采纳
把我的头发扯掉，试图复制Facebook使用的链接风格。使用firebug，我抓取了facebook链接的计算css，并将其应用到我自己的链接中。它的渲染方式是一样的，只是，无论我尝试什么，我都不能像facebook那样缩小线条之间的间隔。无论我设定的线高有多小，行距都保持不变.我怎样才能像Facebook那样缩小我的线条高度，为什么我不能使用计算样式到达那里呢？
链接计算css的一个花招：
浏览 3提问于2012-03-15得票数 1
2回答
每次我使用自定义的ListField推送我的新屏幕时，行的大小都不是必须的。我尝试使用无效，但它不做任何事情。我不明白为什么当我使用焦点导航时，或者当屏幕变得不活动并返回时，列表以适当的方式显示。
浏览 6提问于2013-02-28得票数 2
回答已采纳
1回答
让我们考虑一下这个块元素： Some text and a <a style="编辑首先，内联元素的宽度和高度不受行高属性的影响，因此<a>元素的黄色区域的大小。其次，内
浏览 2提问于2013-12-20得票数 2
无论我做什么，将line-height的值降低到17 No以下都没有效果。我可以将line-height提高到大于17 it，并且它会应用，但我不能得到它低于17 it。有关的CSS是： font-size: 13px;}
试着调整线的高度，无论是高还是低，每次变化后运行更新的小提琴，你就会明白我的意思。在CSS中的任何其他地方都没有指定line-height，所以没有什么可以
浏览 23提问于2012-10-12得票数 69
回答已采纳
5回答
重要的被一类子元素覆盖。
、、、
我有一个非常糟糕的CSS规则(非常具体，使用！重要)，它在段落中设置文本的颜色： color: green !important;然后在该段中添加一个简单的span元素，并通过简单类设置span文本的颜色： font-weight: bold;}
为什么这个低细节和不重要的简单类会覆盖父规则呢codepen.io上的
浏览 6提问于2015-05-26得票数 4
回答已采纳
我有一个侧边栏菜单，我有一个切换按钮，但是我有一个Div，它是边栏的父div，它的高度被一个Node包设置为'auto‘。500ms; height: auto;" aria-expanded="true" aria-hidden="false">如果高度设置为100%，则div将转到屏幕底部，这就是所需的。但是，由于“自动”被强制进入，那么高度只会与“自动”中的项目数量一样高。
为了
浏览 5提问于2016-08-29得票数 1
1回答
我有两个正试图垂直居中的span元素，我设法通过将行高与父元素的高度相匹配来对左元素进行居中，但是右边的元素具有浮动的风格:右不受行高变化的影响，这有什么原因吗?我如何垂直对浮动元素进行居中呢？
浏览 0提问于2015-02-22得票数 2
回答已采纳
1回答
行高在Outlook中不被继承
、、、、
仅在Outlook中，文本不会继承嵌套在上面的两个以上元素的任何父元素的行高属性。但是，如果样式是在正文标记上内联的，或者超出即时td的父类型，则文本位于以行高styleLine-height值前后的mso-line-height-rule: exactly;值作为百分比和点的 (150%和1.5)，我相信只有百分比在O
浏览 3提问于2020-04-20得票数 0
我正在使用，如何才能应用两种不同的呈现方式，一种用于父元素，另一种用于subRows。我对列执行了此操作，但它也覆盖了父元素的呈现方式。父
浏览 0提问于2020-03-05得票数 0
2回答
覆盖角度材质排版页边距
、、、
似乎应用诸如mat-display-1之类的显示类也会将margin-bottom css添加到元素。在创建自定义主题时，我知道如何覆盖大小、行高和粗细，但是有没有办法控制添加多少边距？
浏览 1提问于2018-11-22得票数 6
2回答
我有一个导航栏，下拉列表是绝对定位的，但是由于某种原因，它们仍然出现在所有其他定位项后面，不管z索引是什么。这使得菜单既难看，也很难在带有定位项的页面上使用。，它显示了我的导航栏和它遇到的问题。下面是我的css的一个小的spinet，因为我不认为您想要我的问题中完整的150行代码： background-color: #00242b;
浏览 0提问于2019-08-21得票数 1
回答已采纳
mat-form-field的行高最初设置为1.125。当用更高的值(例如1.5)覆盖它时，它会导致mat-form-field中嵌套的input-element中的跳跃效果。输入的文本将上下跳跃。删除line-height属性时，它不会跳转。有没有人知道如何处理这个问题，为什么会发生这种情况？
浏览 20提问于2018-08-21得票数 1
2回答
JTextArea的大小
、、、
现在，我创建了如下所示：这给了我一个文本区域，大约是40列的5行。垂直地，这个区域填充父容器的整个高度--可能是因为父元素是位于该行中的唯一元素。
水平的父宽度由下面的元素决定，它(通常)比JTextArea宽。因此，我最后得到一个文本区域，两边都有很大的边距。更糟糕的是，当我将框架的<
浏览 3提问于2016-04-22得票数 5
回答已采纳
3回答
行高继承
、、
我不能改变我的span元素line-height，它是在body中定义的(我已经尝试使用!important，以及不同的行高表示法，包括font/ line-height )。sans-serif; font-size: 9px;}更重要<em
浏览 2提问于2012-05-16得票数 3
回答已采纳
3回答
我拥有的：我想要的： position: relative; height: 100%; z-index: 20;在内容之后的父级内部问题：
该层正确地覆盖了父层，但一旦我滚动，
浏览 5提问于2013-05-07得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
