Можем ли мы удалить все внутренние пробелы из div? - PullRequest
Новая
       12

Можем ли мы удалить все внутренние пробелы из div?

3 голосов
/ 10 апреля 2019 

<html>

<body>
  <div style="padding:0;margin:0;background-color:yellow">A</div>
</body>

</html>

Этот пример показывает, что все еще есть внутренний интервал над и под буквой «А». Может ли это пространство быть удалено? Глядя на этот пример: я бы не хотел, чтобы желтые пиксели были выше или ниже буквы «А».

Если это невозможно, есть ли другой способ, чтобы два элемента располагались один под другим, и не более двух пикселей между текстом в этих элементах?

Ответы [ 3 ]

0 голосов
/ 10 апреля 2019

Попробуйте установить значение свойства CSS line-height меньше размера шрифта. 

padding: 0;
margin: 0;
background-color: yellow;
font-size: 16px;
line-height: 12px;
0 голосов
/ 10 апреля 2019 

<div style="line-height: 11px; height: 12px;background-color:yellow;">A</div>

Использовать сочетание высоты строки и высоты.

0 голосов
/ 10 апреля 2019

Если вы не хотите, чтобы родительский div имел пробел выше и ниже символа, вам придется сопоставить высоту строки div с высотой cap https://en.wikipedia.org/wiki/Cap_height - но это можетбыть хитрым с потомками - https://en.wikipedia.org/wiki/Descender.: / - но если вы объясните, что вы хотите достичь - держу пари, есть лучший способ.:) 

div {
  background: red;
  margin-top: 2rem;
}

.normal {
  /* no rules for space */
  
}

.line-height {
  line-height: 0;
}

.line-height-b {
  line-height: .1;
}

.height {
  height: 0;
  overflow: hidden;
  /* not going to see this... */
}
<div class='normal'>A</div>

<div class='line-height'>A</div>

<div class='line-height-b'>A</div>

<div class='height'>A</div>
...