1

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

showkey
  • 482
  • 42
  • 140
  • 295
  • `line-height` of `a` is browser default 20px. – connexo May 08 '16 at 08:35
  • Why the height of middle region is 25px?Please calculate it. – showkey May 08 '16 at 08:43
  • 1
    That value (25px) is different on different browsers, but before answering, what do you expect it to be? – Asons May 08 '16 at 08:51
  • The default font-size is 16px in my firefox,i expect it to be 16px. – showkey May 08 '16 at 09:04
  • You told me to answer "Why the height of middle region is 25px?" and now I see you chose another answer instead, which answer "Why the height of a is 25px?" ... So I deleted my answer since it doesn't answer your revised question. ... I suggest you revise your question again, removing any reference to my answer since it is not there anymore. ... Next time when someone put in some extra effort to give you a well explained answer, you might want give that answerer a chance to update and revise their answer, now neither of the answers explains why and also give not same result across browsers. – Asons May 08 '16 at 15:43
  • See [Inline elements and line-height](http://stackoverflow.com/q/28363186/1529630). Basically it's implementation dependent. – Oriol May 08 '16 at 17:32
  • I got the best answer through serching on yahoo,http://www.pearsonified.com/2011/12/golden-ratio-typography.php – showkey May 09 '16 at 11:27
  • It tell me why in my case the content-area is 25px when font-size is 16px. – showkey May 09 '16 at 11:28

1 Answers1

0

line-height is a separate CSS property. Right now the default will be 20px or so.

You can assign to a the CSS property line-height=1; or line-height=16px;, which will force it to have line-height of 16px.

MattAllegro
  • 6,455
  • 5
  • 45
  • 52
Ashokkumar M. Prajapati
  • 483
  • 4
  • 12
  • This doesn't answer _why_ it is 25px, nor is it enough to set line-height to 16px on the anchor. If you test this in Chrome and FF you'll see it give different result. – Asons May 08 '16 at 15:28