Does The <HTML> Element Have a Default Margin or Padding in Any Browser, Since Normalize.CSS Doesn't Reset It

Does the html element have a default margin or padding in any browser, since normalize.css doesn't reset it?

The <html> tag does not have any CSS rules automatically applied to it. You can apply styles if you like, but the only time I've ever done it is to get 100% height and width.

Default styling for each browser:

http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

http://www.iecss.com/

Why to put a zero margin on html element?

According to W3s default stylesheet (http://www.w3.org/TR/CSS2/sample.html) the html tag should not have any margin or padding and there for it should not be necessary to reset the margin or padding on the html tag.

But I guess there could be some browser out there that does not follow those guidelines and therefore needs a reset on the html tag.

I am guessing people leave that reset for the html tag because of old habit.

Use *{margin:0; padding:0;} if I link normalize.css?

According to the latest version of
normalize.css, it doesn't reset any elements' padding. Therefore, you may need to including padding: 0 to fit your need.

However, it's generally not a good practice to use * instead of specifying an elements or class. Here's another answer about this.

Hope it helps.

What is the default padding and/or margin for a p element (reset css)?

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.

How to remove margin space around body or clear default css styles

body has by default 8px margins: http://www.w3.org/TR/CSS2/sample.html

body { 
margin: 0; /* Remove body margins */
}

Or you could use this useful Global reset

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

If you want something less * global:

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

some other CSS Reset:

http://meyerweb.com/eric/tools/css/reset/

https://github.com/necolas/normalize.css/

http://html5doctor.com/html-5-reset-stylesheet/

How to align this html layout properly?

Those margins are part of the way the browser renders the content by default.

You can remove them by using body, html { margin: 0px; }.

I also recommend you use a CSS reset.

Is there a standard CSS margin/padding/etc. for HTML elements?

You may want to consider using normalize.css as opposed to a reset.css; checking their demo seems to indicate this includes standards for form elements:

http://necolas.github.com/normalize.css/



Related Topics



Leave a reply



Submit