Font in the CSS

Question

Why is there a gap between red border and B if it is the same font?

HTML

<p>A</p>
<h1>B</h1>

CSS

body {
    border: 1px solid red;
    font-family: Arial;
}

http://jsfiddle.net/165v2sd9/2/

by default p and h1 have different css properties. if you want consistency, you might want to reset all the css properties. check out W3C default css stylesheet http://www.w3.org/TR/CSS2/sample.html — Andrew, Aug 27 '15 at 02:41
I couldn't find anything wrong with the fiddle. pls check this one.. http://jsfiddle.net/josangel555/5L3oskda/ .. evey element has `32px` height and `20px` gap between. — Jos, Aug 27 '15 at 02:48
the fiddle you have given doesnt seems to show the exact issue. can u pls recreate this issue in fiddle? — Jos, Aug 27 '15 at 02:53
http://jsfiddle.net/165v2sd9/2/ - See the gap between red border and B? — Altaula, Aug 27 '15 at 02:57
have you checked thee fiddle I posted before, If not pls check... I guess its just an illusion... — Jos, Aug 27 '15 at 03:06
Tip: U can use a chrome extension called `Dimensions` to measure the gaps.. — Jos, Aug 27 '15 at 03:07
The gap is so minimal.. just add some padding on the parent element and you'll be g2g — codeaddict, Aug 27 '15 at 03:11

codeaddict · Answer 1 · 2015-08-27T03:00:43.653

4

Edit: I totally misread your question. It looks like that's just how the B is in that font.. You're comparing it to an A. If you compare to a B the gap is there..

edited Aug 27 '15 at 03:00

answered Aug 27 '15 at 02:45

codeaddict

879
5
14

In the given fiddle he is mentioning `em` for `body` tag. In such a case, won't it calculate based on the `font-size` of `body`? – Jos Aug 27 '15 at 02:51
But why there is that gap? – Altaula Aug 27 '15 at 03:03
@redflar3 yes I believe you're correct in this case. I didn't read the question right, I thought he was talking about vertical gap – codeaddict Aug 27 '15 at 03:03
2

@MarekKobida, yes it's because you're comparing between `A` and `B`, which with the same `size`, the `B` in that font doesn't use all the space (width) given to draw the font, so there's the gap. And the bigger the `size`, the gap will also increase. – Kyojimaru Aug 27 '15 at 03:05
@MarekKobida, here's the difference [http://jsfiddle.net/165v2sd9/4/](http://jsfiddle.net/165v2sd9/4/). You can change the `font-size` of the `span` to a bigger size to see the difference between how the `Arial` `font-family` draw the `A` and `B`. You can change the `font-family` to other type to see how each of them draw it. – Kyojimaru Aug 27 '15 at 03:14

score 0 · Answer 2 · answered Aug 27 '15 at 02:52

0

The gap is simply there because, <h1> and <p> are block level elements, and therefore a particular height has been assigned to them, and a width of 100%. If you would like to get ride of the gap, you can try adding display:inline on your <h1> and <p> elements, you can read more about it here:

Height given to a block element

answered Aug 27 '15 at 02:52

Pouya Ataei

1,959
2
19
30

that seems like a poor solution, it doesn't seem like the height should affect the spacing like this. plus what if the intended behavior is to have block elements? – Daemedeor Aug 27 '15 at 04:32
The height does affect the spacing, you can inspect element and have a look through. If the intended behavior is the to have block elements, you can place your
and
tags inside a HTML table
– Pouya Ataei Aug 27 '15 at 04:35
the spacing on the left and right? I tried playing around with the height and couldn't replicate what you're trying to suggest. but in other words your solution is... go to tables. but i think its a different thing – Daemedeor Aug 27 '15 at 04:40
try reading about HTML tables, and apply a decent structure, and you will achieve the right functionality, if you're looking forward to see how is it implemented, give me an email and I will send you a sample – Pouya Ataei Aug 27 '15 at 06:18
there's reasons to use HTML tables but of making layouts.. should not be the answer. unless you're supporting back to IE 6 or so OR writing html emails. There are now new techniques for handling layout design without having to deal with using tables. the only valid layout reason (other than to present data related information) for html tables is if you really want to get something quick and dirty for vertical alignment but that should be using sparingly and will be hard for future maintenance. tables are for tabular data and should be used minimally elsewhere – Daemedeor Aug 27 '15 at 20:14
HTML tables currently account for almost all the EDM's being generated and sent through, and thus, I was just providing one example of the usage, elsewhere, you're right, there are much better methods to design and align the main layout. Secondly, the solution provided is ain't quick and dirty, it's In fact the least-code consuming solution provided comparing to yours and the other one. All you've gotta do is to make your block element inline, and make usage of
elements to arrange your paragraphs and headings, without any extra spacing... – Pouya Ataei Aug 28 '15 at 07:22
sometimes the least code-consuming is not always the best. because now for every p and every h1, now you have to put another
or deal with other layout issues that come with dealing with inline elements. just to deal with a 1-2 px difference of spacing whereas my solution is almost a copy paste and can be generally left alone. – Daemedeor Aug 28 '15 at 19:50
Well then, in this case, the scale matters, on high scale, my solution is definitely an overkill, whereas yours is much better, and on the contrary just to solve an issue of one div containing several
and
tags, my solution is way better than yours.
– Pouya Ataei Aug 29 '15 at 08:29
but do you really build things that do not scale? Given the context, the OP is looking at p and h1 tags, so your solution would basically be change ALL p and h1 tags to table/inline elements to address this one quibble not just in the context of one div since this will keep occuring because its inbuilt to all p and h1 tags, not just this one specific div – Daemedeor Aug 29 '15 at 09:28
Yes, I would use this snippet of a code if I'm not having many
and
tags, and as OP hasn't stated the scale of the usage, my answer is theoretically correct. And you can specify for it, to only happen in specific div, or on a specific paragraph, therefrom other elements won't be manipulated.
– Pouya Ataei Aug 29 '15 at 15:15

score 0 · Answer 3 · answered Aug 27 '15 at 03:00

If your problem is the margin at the left you could first initialize your html with the body margin:0; an then add the margin to the elements.

body {
    margin:0;
    color: #333;
    font-family: Arial;
    /*line-height: 2em;*/
}

p,h1 {
    margin: 20px 0;
}

score 0 · Answer 4 · edited May 23 '17 at 12:06

So i did an inspection on the elements in the fiddle and I noticed these defaults in the user stylesheet (-margin-before, -margin-after, -margin-start, -margin end)

p{
-webkit-margin-before: 3px;
-webkit-margin-after: 3px;
-webkit-margin-start: 3px;
-webkit-margin-end: 3px;
}

h1{
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

These seem to control the spacing of the elements, I tried giving it 0px at first but that totally didn't do anything, so i gave the p tag more spacing at the start up to 3px and that seemed to align it... it might be good to bake this into a css restart file... though I have no idea why chrome would want to even have these defaults to begin with ... after looking at another SO question regarding this there's a lot of answers but no clear way to deal with this, but you might want to check the SO for reasons why this would be.... and it seems its not a chrome specific thing...

Here's the SO for reference: -webkit-margin adds unwanted margin on texts

Font in the CSS

4 Answers4

tags inside a HTML table

tags, my solution is way better than yours.

tags, and as OP hasn't stated the scale of the usage, my answer is theoretically correct. And you can specify for it, to only happen in specific div, or on a specific paragraph, therefrom other elements won't be manipulated.