Top margin displaying as 18px but not set in css

Question

I'm having some trouble isolating where, exactly, a p element's margin is set in the various css files our project uses. A margin rule does not appear in the css list of the element inspector in developer tools (F12) of either IE or Chrome (although Chrome does of course include a chart at the bottom of the css rules list telling me that 18px of top and bottom margin is being applied from SOMEwhere).

I have just used 'Grep' to search all the files in the project for the strings: "margin: 18px", "margin-top: 18px", "margin:18px" and "margin-top:18px". There were no matches.

My question is - what OTHER way is there to set a margin? Can it be set as a by-product of some other property? A stupid suggestion, I know, but I'm not sure what else to think.

And I have checked and re-checked the css list in the element inspector and a margin rule is not displayed - even though Chrome tells me, in that chart only, that margin is set somehow.

Any new knowledge, well appreciated, thanks.

EDIT
Just to be clear - when I talk about checking the 'css list of the element inspector in the developer tools', I mean I have checked the element in the F12 developer tools in both IE and Chrome.
And sorry to be evasive, but the project is much too large to demonstrate in a js fiddle.

JSFiddle please.Also, have you checked through the developer console? — Satej S, Apr 13 '16 at 07:29
"And sorry to be evasive, but the project is much too large to demonstrate in a js fiddle." Then **take the effort** to create a **minimal, concrete and verifiable example**. If you can't take the initiative to reduce the issue yourself, you can't expect the community to help just by looking at text-based description of your problem *sans* code. — Terry, Apr 13 '16 at 08:04
You should reset your css at the start to default all settings as undefined settings are calculated differently by each browser. — DreamTeK, Apr 13 '16 at 08:05
@Terry Easy, easy. Just because I didn't use jsfiddle doesn't mean I didn't use my initiative. I've given a very clear description of the problem and have used my initiative to find a solution prior to even asking this question. Also it turns out it was a browser default problem, so jsfiddle wouldn't have helped anyway. Just be nice. — moosefetcher, Apr 13 '16 at 08:10

score 1 · Answer 1 · answered Apr 13 '16 at 07:31

The CSS 2.1 specification has an default style sheet for HTML 4. It’s just informative and not normative so browsers may use it but do not have to.

Another resource could be the webdeveloper tools of the browsers. Most can show you the cascade of rules that were applied to a particular element. An example: Firefox and Safari (WebKit) seem to use margin: 1em 0px for p elements.

score 0 · Answer 2 · answered Apr 13 '16 at 07:58

0

Browsers always have a "safe zone" build into them. You can override this through CSS with a simple "rule sheet".

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;

I'm hoping this "reset" helps you out!

answered Apr 13 '16 at 07:58

Tycho Horn

55
5

Just write an * (asterisk) instead of every possible element in html – Bálint Apr 13 '16 at 08:01
Yeah that works too. Just thought it would be best for answering the question. – Tycho Horn Apr 13 '16 at 10:01
Yeah, I don't have any problem with the answer, I just added a side-note if you don't want to have 4 lines in every css file. – Bálint Apr 13 '16 at 10:40

score 0 · Accepted Answer · answered Apr 13 '16 at 08:01

0

Browsers have some built in CSS rules that you'll want to override to make sure you have essentially a 'blank canvas' to build upon. A good and widely used reset CSS is Eric Meyer's CSS Reset - copy the contents of the reset CSS into a new reset.css file and include this before you include your project's custom CSS.

answered Apr 13 '16 at 08:01

Robert

362
2
13

Or you can use CSS reset alternative called [Normalize CSS](https://github.com/necolas/normalize.css). Check [this answer](http://stackoverflow.com/a/8357635/1762903) if you want to know more about Normalize. – Bobby Apr 13 '16 at 08:50

Top margin displaying as 18px but not set in css

3 Answers3