Why people add padding:0; on body element? I don't see any point in that. All browsers use default margin:8px; on body not padding. Am I missing something ? Is there any quirks?
* {
margin: 0;
padding: 0;
}
This is part of the "CSS Reset" theory which helps keep your designs consistent across browsers, a very good thing. Unfortunately this is not a good practice. It is very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons.
If body { margin: 0; } is used, all other standards compliant browsers (excluding Opera) will set items into the top left corner of the window.
If body { padding: 0; } is used, only Opera (both Mac and Windows) will set items into the top left corner of the window.
The best way to set items into the top left corner of the window is to use body { margin: 0; padding: 0; } which will work for all standards compliant browsers.
Related
For whatever reason, I can't seem to put the right words in my search engine. It seems like a really easy thing. Let's say I have simple markup as follows:
<div>Hello!</div>
And I apply the following styles:
body {
background: blue;
}
div {
background: green;
width: 100%;
}
Now ideally, I'd like the green to stretch across the entire screen, but for whatever reason theres a buffer between the ends of the window and the div, that are blue. When I go to inspect the div, I note that there is 0 padding/margin and just the content box. When I inspect the HTML element. it's just the content with no padding/margin as well.
I guess my question is, how can I get rid of that blue buffer area between the html and the containing div? The only way I have successfully done it, is negative margins on the div, but that seems hacky. Any thoughts?
Even without any CSS applied, every browser does some default styling of elements. This includes margin on the body element. To overwrite these default styles (which you can inspect via your browser's developer tools, if any - for example via F12 in Chrome), you just set custom CSS rules accordingly. For your specific problem, you should add margin: 0 to the styling of the body tag.
Now, since every browser has different defaults, many developers decide to reset the styling entirely before applying their own. This can make for a more consistent and streamlined CSS developing process. There are several of these reset stylings available, a famous one being Eric Meyer's CSS reset.
Body element has default margin at every direction 8px long, so just rewrite this default.
body {
margin: 0;
background: blue;
}
#Edit:
...also It's great example to practice 'Developer Tools' using. There's nice guide: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
You should consult the CSS box model when you have questions like this one. You just need to remove the margin from the body.
body {
background: blue;
margin: 0px
}
div {
background: green;
width: 100%;
}
<div>Hello!</div>
In all versions of Internet Explorer (including version 11 beta), the element textarea is 1px or 2px lower than a textarea with the same width in any other browser. How to solve?
To solve the layout issue of IE 11 (and makes the layout appearance of all browsers look 99% alike), it is suggested to use CSS Reset.
Copy and paste the CSS Reset script at http://cssreset.com
Just looking at Chrome and IE, they set slightly different default height and margin properties for an otherwise unstyled textarea. To get cross-browser consistency, your best bet is to be explicit about all the box model properties like so (values selected at random but you get the idea):
texarea {
width: 400px;
height: 100px;
padding: 0;
border: 1px solid #999;
margin: 0;
}
Hope this helps.
Set height on the textarea element, and set display: block on it (to make height applicable). Example (you should of course use an external style sheet in real life):
<textarea rows=10 style=
"display: block; height: 12em; line-height: 1.2; font-size: 90%; margin: 0">
Using a height value that equals 1.2em times the number of rows seems to work OK. It should be enough for fonts that you normally want to use in a textarea. The rest is there to deal with differences in browser defaults.
Explananation: If you look at a textarea element in browser’s developer tools, you can see that the padding and border values are the same but content height differs. The reason is that textarea formatting is browser-specific and the height calculation is based not only on font size but also on browser-dependent rules. Browsers let you override this.
You could additionally set these, as they correspond to common browser defaults, but some browsers might deviate a bit (which is normally not relevant, but may matter if you aim at pixel-exactness):
textarea { padding: 2px; border-width: 1px; }
My question is: is this a bug or intended behavior, should I report this on the bugtrackers for the browsers, or simply find a css fix?
Here is a fiddle with the minimum amount of code needed to reproduce this behavior: http://jsfiddle.net/tjVvp/8/
I have tested this in Firefox and Chromium. The issue relies on the combination of the <p> element and the fieldset css code:
fieldset {
padding: 0;
margin: 0;
border: 0;
}
If <p> is removed, the issue does not appear. In that case, the page is rendered identical in both Firefox and Chromium.
If the <p> element is present, but without the CSS code for the fieldset element, both Firefox and Chromium will render the page identically.
They need to be both present at the same time, or the issue does not occur.
If the css code for the fieldset element is present, that is when the pages are rendered differently, as can be seen in the fiddle.
It gets even more complicated: the issue only occurs when all 3(margin, padding and border) are set to a value. If you remove one of the declarations, the browsers will render the pages identically. It doesn't matter which combination is left, only when all 3 properties are declared will the difference occur. And then only if the <p> element is present.
So, repeating my question from the top of this text: is this a bug or intended behavior, should I report this on the bugtrackers for the browsers, or simply find a css fix?
I think what you're referring to might be the default margin of <p>. If you inspect the <p> tag you can see the margins on either side:
Also note that the margin on the top is being applied not to <p> itself to one of its ancestors, this is called margin collapsing.
References
CSS 2.1 Spec - Collapsing margins
Try this one, I try it on fiddle and it's working fine.
fieldset, p, label {
padding: 0;
margin: 0;
border: 0;
}
header {
display: block;
width: 100%;
height: 40px;
background-color: red;
}
legend {
margin: 2px 0px;
padding:0px 10px 0 0;
float: left;
}
I have a canvas object in a div. The canvas seems to have a padding around it somehow. I want its edges to touch the edges of the browser screen:
// my html file:
<body>
<div id="canvasholder"></div>
</body>
// my java gwt code
Canvas canvas = Canvas.createIfSupported();
canvas.setWidth("100%");
canvas.setHeight("100%");
RootPanel.get("canvasholder").add(canvas);
but yeah the page still has a ~20px margin around the canvas element. There is nothing else on the page beside what's copied above.
I don't think this is a GWT specific problem, might be that html elements have default padding/margin to them?
Thanks
------ Update ------------
I'm weirdly still seeing the padding, the firebug plugin is showing me that the body element has a 10px margin somehow:
// firebug inspection of the body element:
body {
background: none repeat scroll 0 0 #FFFFFF;
border: 0 none;
color: black;
direction: ltr;
margin: 10px; // huh?
padding: 0;
}
// my css file:
hml, body, div, canvas {
margin: 0px;
padding: 0px;
}
div.logParent {
position: absolute;
top: 20px; left: 20px;
color: black;
z-index: 2;
}
I had similar problem, the absolutely positioned div with canvas inside (added via JS so no extra spaces around) was causing overflow on page when I positioned div at the bottom of the page.
The solution was to set canvas display property to 'block' (didn't know it's 'inline-block' by default at the time) and now no extra padding is added and scrollbars are gone.
As you've correctly noted, browsers implement default styles for various HTML elements (and they're not standardised, so every browser implements slightly different defaults). For your purposes, given your posted HTML, you'd need something like the following:
html, body, div, canvas {
margin: 0;
padding: 0;
}
This does, of course, over-simplify things and it might be worth setting font-size and default color and background-color properties too (among many, many others).
References:
CSS Reset Reloaded, by Eric Meyer.
YUI reset.
And there are many others, though I really can only think of those two, the css-reset might be of use to you, though.
I want the vertical menu completely at the top-left corner but right now there still about 2px top and left margin and I can not figure out why, all margin set to 0 already. Some one have any idea?
Thank so much!
The body tag has a margin set on it, try:
body { margin:0; padding:0; }
add margin: 0px; to your pages body tag.
You need to set margin: 0 on the body (live editing via Developer Tools solves it for me).
And learn to use Developer Tools ;)
Using Chrome, it showed me you had something like this:
body {
display: block;
margin: 8px;
}
from the user agent stylesheet.
You used some CSS Reset? If not, use this: http://meyerweb.com/eric/tools/css/reset/. Or if you want a quicker solution, use body {margin: 0; padding: 0;}
I'm guessing that there are still default margins on the page. Try using a CSS reset file. This will make sure that the margin and padding are all 0 when you start (along with some other nice resets).