css where is this padding comes from

Question

This is a jsfiddle http://jsfiddle.net/zFSLM/1/

try to enlarge the width of the view in jsfiddle please

This is the result:

enter image description here

Please check that the h1 has a padding around it, where does it come from?

This is the css of the h1

.inputForm ul h1{
    font-weight: 700;
    color: inherit;
}

score 2 · Answer 1 · edited May 23 '17 at 12:08

2

It's not padding, it's margin add to

.inputForm ul h1{
    margin:0;
}

It's from the user agent style sheet, see:

What is user agent stylesheet

edited May 23 '17 at 12:08

Community

1
1

answered Jul 23 '14 at 19:55

joegandy

320
1
5

score 1 · Accepted Answer · answered Jul 23 '14 at 19:55

1

Browsers by default give h1 a margin. Just add margin: 0 in your css:

.inputForm ul h1{
    font-weight: 700;
    color: inherit;
    margin: 0;
}

answered Jul 23 '14 at 19:55

Jmh2013

2,625
2
26
42

+1 , I will accept the answer when the system allows – Marco Dinatsoli Jul 23 '14 at 19:58

score 1 · Answer 3 · answered Jul 23 '14 at 19:57

1

I would apply the following styles to your H1 CSS:

margin:0; padding: 0;

It appears that it is being generated by the user agent stylesheet - also known as your browser's default styling on basic HTML elements.

answered Jul 23 '14 at 19:57

alanine

121
5

score 1 · Answer 4 · answered Jul 23 '14 at 19:57

It is almost always a good practice to use some version of a reset file: http://www.cssreset.com/. I use Eric Meyer's version. Some prefer normalize.css. At any rate, it is good to neutralize browser stylesheets to have more flexibility and control over how you want your page to look.

css where is this padding comes from

4 Answers4