如何在``标签内有效消除``标签间的间距？-html教程-PHP中文网

如何在``标签内有效消除``标签间的间距？

霞舞

发布： 2025-03-18 09:10:19

原创

261人浏览过

如何在``标签内有效消除``标签间的间距？

网页布局中，精准控制文本行高至关重要。line-height属性通常能轻松解决此问题。然而，当<p></p>标签嵌套在<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></pre>

登录后复制

</div>标签内，并尝试使用line-height: 0;消除段落间距时，可能会出现意想不到的结果。

问题：作者尝试使用p { line-height: 0; }来消除<p></p>标签间的间距。在非<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></pre>

登录后复制

</div>环境下，此方法有效。但当代码片段包含在

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></pre>登录后复制
</div>

标签内时，p { line-height: 0; }失效，段落间距依然存在。即使添加pre { line-height: 0; }和pre p { line-height: 0; }也无法解决问题。

解决方案：将line-height: 0;直接应用于<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></pre>

登录后复制

</div>元素本身。修改样式为pre { line-height: 0; }即可。

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></pre>登录后复制
</div>

标签会继承并应用其子元素的样式，设置

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></pre>登录后复制
</div>

标签行高为0，能有效影响其内部所有元素（包括

<p></p>
                    
                        
                            
                        
                        
                            美间AI
                            美间AI：让设计更简单
                            
                                
                                45
                            
                        
                        
                            查看详情