网页布局中,精准控制文本行高至关重要。line-height
属性通常能轻松解决此问题。然而,当标签嵌套在
标签内,并尝试使用
line-height: 0;
消除段落间距时,可能会出现意想不到的结果。
问题:作者尝试使用p { line-height: 0; }
来消除标签间的间距。在非
环境下,此方法有效。但当代码片段包含在
标签内时,
p { line-height: 0; }
失效,段落间距依然存在。即使添加pre { line-height: 0; }
和pre p { line-height: 0; }
也无法解决问题。
解决方案:将line-height: 0;
直接应用于元素本身。修改样式为
pre { line-height: 0; }
即可。标签会继承并应用其子元素的样式,设置
标签行高为0,能有效影响其内部所有元素(包括
标签)的行高,从而消除段落间距。