2016-03-09 149 views
0

即使正在重置margin和padding h1标签后仍然有之前其内容额外的空间之前和H1标签后

see code pen

添加

line-height:0.7em; 

规则后神秘不需要的差距大约为解决问题,然而

  1. 它看起来不干净
  2. 仍然有很少的不需要的像素
  3. 不确定这不会导致不同的字体大小或单位的问题。

是否有一个干净的和通用的解决方案,可能使用sass /少混合数学运算?

HTML:

<h1>Some text</h1> 

CSS

* { margin:0;padding:0; } 
h1 { font-size:25em; } 
+0

你能后的CSS和HTML片段? – Stefan

+0

html:'

部分文字

'css'* {margin:0; padding:0;} h1 {font-size:25em;}' –

+0

hi使用'margin-bottom:-68px;'或您希望的号码 –

回答

0

可以肯定,即保证金的你的CSS规则:0;填充:0;打开。做它!重要只是为了测试。 line-height:1;应该解决问题(或行高:0)。 您可以为H1元素设置高度

4

默认h1标签具有线heigth属性,你可以调整它像

h1 { 
font-size: 25em; 
line-height: 0.7em; 
} 

更新例如

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
h1 { 
 
    font-size:25em; 
 
    line-height:0.7em; 
 
}
<h1>Some text</h1> 
 
<p>lorem ispum</p>

+0

这是工作,是的,但是再次:目前还不清楚。为什么正好0.7em?罚款也是0.695或者0.69。它也没有达到像素完美 –

+0

@ iamjack'swastedlife它取决于你的字体大小,但你可以像你想要的那样调整它 –

0
h1 { 
     font-size:25em; 
     background-color:pink; 
     line-height:0.8; 
    } 

你可以做什么我只是添加的line-height

0

h1.demo { 
 
    padding: 0 !important; 
 
    margin: 0 !important; 
 
    line-height: 40px; 
 
    font-size: 40px; 
 
}
<h1 class="demo">Some Text</h1>

+0

使用字体大小与px中的行高一样。 –