Как обнулить внутренние отступы?

252
01 февраля 2018, 16:20

Возможно ли обнулить внутренние отступы у различных тегов?
Допустим имеем тег h1, видно, что при больших размерах текста есть верхний и нижний отступ.
Текст не прижат к краям блока по вертикали.
Можно ли это исправить?

h1 { 
  background: red; 
  padding: 0; 
  -webkit-margin-before: 0em; 
  -webkit-margin-after: 0em; 
  -webkit-margin-start: 0px; 
  -webkit-margin-end: 0px; 
}
<h1>hello</h1>

Answer 1

Используйте line-height:

h1 { 
  background: red; 
  line-height: .7;  
}
<h1> 
hello 
</h1>

Но не забудьте что отступы там оставлены специально для выносных элементов, например:

h1{ 
   background: red; 
} 
 
h1.gool{  
  line-height: .7;  
} 
 
sub,sup{ 
  line-height: 0 
}
<h1 class="gool"> 
hel<sup>2</sup>o go<sub>2</sub>l 
</h1> 
 
<h1> 
hel<sup>2</sup>o go<sub>2</sub>l 
</h1>

Answer 2

Задать свойство line-height. 

h1 { 
  background: red; 
  line-height: .7; 
}
<h1>hello</h1>

READ ALSO
Парсинг сайта для самых маленьких [требует правки]
CSS

Парсинг сайта для самых маленьких [требует правки]

Здравствуйте, нужна ваша помощьСразу скажу, что в программирование я новичок и буду очень рад если вы объясните все как можно понятнее и подробнее

 402
CSS анимированное шестиугольное меню
CSS

CSS анимированное шестиугольное меню

Я пытаюсь найти лучший способ создать анимированное шестиугольное меню

 474
Laravel 5.5 проблема с объединением таблиц
MySQL

Laravel 5.5 проблема с объединением таблиц

ЗдравствуйтеНедавно начал работать с фреймворком laravel

 313
Выборка уникальных строк по одному полю
MySQL

Выборка уникальных строк по одному полю

ЗдравствуйтеИмеется таблица kubki, в ней есть поле seria, нужно выбрать все уникальные значения строк в поле seria, и при этом выбрать все остальные...

 359