Is the space in the top element a padding?

Question

An element's padding is the space between its content and its border.

Consider the code below:

<p style="background-color: tomato; border: 1px solid black; padding:0px; ">A paragraph</p>

Here I am expecting no space between the text and the border because I am setting the padding to 0px, But I got the opposite result as shown in picture.

I am sure that, that space is not a padding, so why I am getting that space? Also is there any way to get rid of it?

Thanks)

you can set the `line-height: 1` also typeface may create some extra space — Sifat Haque, Dec 15 '22 at 00:12
Check out [The Accepted Answer To This Question](https://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element) — Zak, Dec 15 '22 at 00:13
Thank you @Daniel A. white, I am not setting any font, so i guess the chrome browser uses its default text, which i guess Times New Roman. — Ninja, Dec 15 '22 at 00:32
You can check what it is by looking at the [devtools box model](https://www.codecademy.com/article/f1-devtools-box-model). — Jesse, Dec 15 '22 at 00:33
Thanks @Sifat Haque, line-height: 1; did not solve the problem, the top space is still there) — Ninja, Dec 15 '22 at 00:33
Thanks @zak, i am currently reading your link, it seems related to my problem — Ninja, Dec 15 '22 at 00:34
Thanks @Sifat Haque)) the line-height: does not solve the problem — Ninja, Dec 15 '22 at 11:58

score 0 · Answer 1 · answered Dec 15 '22 at 03:56

0

Desktop browsers (including Firefox) use a default line-height 1.2 , depending on the element's font-family.

if you apply line-height = 1, then your problem solved ✅.

<p style="background-color: tomato; border: 1px solid black; padding:0px; line-height:1;">A paragraph</p>

answered Dec 15 '22 at 03:56

Savraj Dutta

17
2

Thanks @Savraj Dutta), but line-height does not solve the problem. – Ninja Dec 15 '22 at 11:56

Is the space in the top element a padding?

1 Answers1