neubert
neubert

Reputation: 16802

removing gap between div border and font

Here's my CSS:

div {
  border: 1px solid
  font-size: 30px
  color: red
  width: fit-content
  height: fit-content
}

Here's my HTML:

<div>&#11165;</div>

Here's how it shows up in the browser:

enter image description here

Here it is on JS Fiddle:

https://jsfiddle.net/f9wkb4qp/

I'd like to remove the gap between the div border and the font. eg. I'd like to make the result look more like this:

enter image description here

Any ideas as to how I might achieve this effect? Or is this even possible? Like if the white space is actually part of the character then I guess it might not be possible?

Upvotes: 0

Views: 45

Answers (1)

user18223950
user18223950

Reputation:

Try to use line-height.

div {
    border: 1px solid;
    font-size: 30px;
    color: red;
    width: fit-content;
    line-height: 0.9;
}
<div>&#11165;</div>

Upvotes: 1

Related Questions