it_is_a_literature it_is_a_literature - 7 months ago 12
HTML Question

Why the height of a tag in its content-area is 25px?

The default font-size in my firefox is 16px.

The height of the body is 69px, height of div is 2*22,so the height of a tag in its content-area is 69-22-22=25.

why the line-height of a tag in its content-areais 25px?



body{
padding:0;
margin:0;
}
a {
background:black;
padding:5px 20px;
border:3px solid yellow;
margin:10px;
}

div {
background:green;
height:20px;
border:1px solid red;
}

<body>
<div></div><a href=""></a><a href=""></a><div></div>
</body>





Think for LGSon's answer,the real problem is why the height of a tag in its content-area is 25px,it is 25px too in LGSon's example.

enter image description here
enter image description here

In my case ,the height of a tag in its content-area is 25px.
The dimension is 0*25 for a tag,height is 25px.
enter image description here

In LGSon's first case and last case,the height of a in its content-area is 25px too.
The dimension is 24*25 for the first a tag,height is 25px.

enter image description here

Answer

If you are wondering why it overlaps and gets out of bouts you should know that elements like a, span, b, i are inline elements. So, they have by default display: inline. Due to this default setting when you add padding it appears like in your images / snippet.

Add display: inline-block;.

body {
    padding: 0;
    margin: 0;
}
a {
    background: black;
    padding: 5px 20px;
    border: 3px solid yellow;
    margin: 10px;
    display: inline-block;
}
div {
    background: green;
    height: 20px;
    border: 1px solid red;
}
<body>
    <div></div><a href=""></a><a href=""></a><div></div>
</body>