Question

I’m trying to create a border around an <H2> and the border is always rendered much larger than the <h2> text. No size is set anywhere. The H2 contains one sentence of text with a 25px font size, and let Chrome Developer Tools -> Metrics reports that the size of the H2 is 980×183, and I can visibly see that this extends beyond the text to the right, all the way up past the text to the top of the screen, and far, far to the left of the text.

So, with no size being set, how can the area of the H2 element be so much larger than the text? I might need to provide a lot more context for anyone to answer this, but it seems almost like the question should be able to stand alone.

The <div> containing the H2 is 0px x 0px, which also blows my mind a bit, but I’ve googled around quite a bit and don’t feel that is likely to be related.

Answer 1

Try adding CSS:

 h2 { display: inline; padding:0;margin:0} 

h2 elements are displayed as blocks with default margin and padding