3

I have an HTML document with the following CSS style:

h1 {
    font-size: 4.2em;
    text-align: center;
    font-family: "Arial Black", Gadget, sans-serif;
}

When inspecting my page in the browser I am seeing this additional styling being added without my input: 

h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67em;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

It says browser stylesheet where normally it would have the css file name and line number.

I found the solution was to set my H1's margins to 0. But why are those mystery margins being added in the first place?

Andrew Hendrie
  • 6,205
  • 4
  • 40
  • 71
JohnWick
  • 4,929
  • 9
  • 37
  • 74

1 Answers1

7

This is a default on webkit browsers.

The -webkit-margin-* rules are overwritten by:

margin: 0;

Do not worry about them.

Note: You might need to use:

padding: 0;

in certain cases as well.

See these similar questions:

-webkit-margin adds unwanted margin on texts

Why is -webkit-margin-before (and after, start, end) not being overridden by my explicit margin and padding rule?

Community
  • 1
  • 1
Andrew Hendrie
  • 6,205
  • 4
  • 40
  • 71
  • 1
    That must be the quickest up-voting I've seen in a long time! – Darren Mar 10 '15 at 01:10
  • 1
    Same... and I am not complaining :) one of my first answers! – Andrew Hendrie Mar 10 '15 at 01:10
  • 1
    Great thanks, I'll admit I only did a quick search to see if the question had been asked and didn't see these. It's kind of annoying to have some styling added by the browser that is unwanted, but the solution is simple enough. – JohnWick Mar 10 '15 at 01:11
  • Yeah, I've been annoyed by this in the past as well. I'd imagine that this is so that certain html elements will have a default margin in cases where designer/developers don't specify margin/padding attributes for the element (because in most cases these elements should have some space around them). – Andrew Hendrie Mar 10 '15 at 01:14
  • Yeah, but most would assume not setting a margin means margin = 0. According to Chrome, not setting a margin means you have a margin, haha. (Atleast on H1 tags.) I'll mark this as the answer when SO let's me. – JohnWick Mar 10 '15 at 01:16
  • @DavidStampher you shouldn't call it unwanted, it makes sure there is space above and below the headings, same for paragraphs, lists etc. it's very very basic thing for HTML/CSS, it provides the essential readability for web pages. – Stickers Mar 10 '15 at 01:17
  • 1
    @sdcr and they are reasonable defaults for basic designs. also for Dave, You could add * { margin: 0 } to your normalize or html5bp css files (if you're using either of those) to avoid this in the future. – Andrew Hendrie Mar 10 '15 at 01:19
  • @sdcr In this case, it was unwanted. And I would assume these default values vary between IE, Firefox, and Chrome right? Or are there standardized defaults? – JohnWick Mar 10 '15 at 01:19
  • 1
    This is standardized over webkit browsers which doesn't include IE or Firefox (http://www.quirksmode.org/blog/archives/2010/12/list_of_webkitb.html). – Andrew Hendrie Mar 10 '15 at 01:20
  • I appreciate all the responses. You all have been very helpful! – JohnWick Mar 10 '15 at 01:24
  • 1
    @OhHendrie different browser does have slightly different default rules, but all minor. That makes [normalize.css](https://github.com/necolas/normalize.css/) famous. No all DEVs agree with using reset CSS, i.e. this one http://snook.ca/archives/html_and_css/no_css_reset I'm not saying I'm totally agree with him, but yes I agree. – Stickers Mar 10 '15 at 01:25
  • 1
    @sdcr Nice short but informative read there, the author makes some good points for not using a CSS reset, but it seems he isn't in the majority. I think I'll use a CSS reset from now on. It would have solved the issue I had when I wrote this question had I been using one. (Although I understand they aren't necessarily required.) – JohnWick Mar 10 '15 at 01:36
  • 1
    @DavidStampher it's totally your choice, glad you read it, there is nothing wrong about using a reset or not, it all depends on what you need and what you like. – Stickers Mar 10 '15 at 01:40