CODEWITHSUNDEEP
htmlcss
Altaula
Altaula

Reputation: 784

Font in the CSS

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

Result

HTML

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

CSS

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

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

Upvotes: 0

Views: 87

Answers (4)

Daemedeor
Daemedeor

Reputation: 1013

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

Upvotes: 0

codeaddict
codeaddict

Reputation: 879

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..

Upvotes: 4

Alex Llanez
Alex Llanez

Reputation: 35

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;
}

Upvotes: 0

Pouya Ataei
Pouya Ataei

Reputation: 2169

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

Upvotes: 0

Related Questions