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
CSS How to Make <Td> a Fixed Height
How to Put Table in The Center of The Page Using CSS
Why Is My Background Color Not Showing If I Have Display: Inline
Flip/Mirror an Image Horizontally + Vertically with CSS
Twitter Bootstrap Tabs Not Working: When I Click on Them Nothing Happens
Bootstrap Dropdown Clipped by Overflow:Hidden Container, How to Change The Container
How Could I Play a Shoutcast/Icecast Stream Using HTML5
How to Make a Div 100% of Page (Not Screen) Height
Firebase Not Running Index.HTML File
How to Style Input File Textbox
CSS Metaphysics: Why Is Page Vertical Alignment So Difficult
How to Style The Browser's Autocomplete Dropdown Box
Grow Height of Parent Div That Contains Floating Nested Divs
How to Make a Text Input Non-Editable
Assign Variables to Child Template in {% Include %} Tag Django