Back to good old browser default style sheets again. In order to ensure your page content sits
exactly as you desire on all browsers and doesn’t inherit browser defaults, it is important to
consider resetting the page margin and padding in the body selector.
Netscape and IE place a default margin of 8px around the <body> element. The Opera browser
confuses things further by applying a default padding of 8px. Therefore, until all browsers agree
and can settle on either margin or padding to provide this default spacing, it is recommended
that margin and padding be given the values you desire in the body selector:
/* Define default values for the whole site */
body {
margin: 0;
padding: 0;
}
Obviously values of 0 will remove the default spacing entirely, so it may be that you prefer
to set the margin to 10px, 20px, or whatever you need.
Other methods are available that will reset all margins and padding to a defined value that
is inherited throughout unless you declare otherwise. Such methods should be used with caution however, as all headings, paragraphs, lists, and so on will also inherit the value, and if the value
is 0, you might end up in trouble, with all of your page elements bunched together. This would
then require margin and/or padding values to be declared for all headings, paragraphs, and other
elements that typically have sensible default spacing values.
Showing posts with label Margin. Show all posts
Showing posts with label Margin. Show all posts
Monday, October 4, 2010
Css tutorial : Centering with margin: auto
The best way to center an element with CSS is to use the auto value for left and right margins.
For modern browsers, all this requires is a set width rule (as without it the box would naturally
stretch to fit its container—in this case the browser window) and the left and right margins
given the auto value. Building upon the earlier example, we have the following rule:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
Most browsers are happy with this, although IE5/Win fails miserably, usually aligning the
element to the left. At the time of writing, most IE users are using IE6, and IE7 is on the way, but
the percentage of IE5 users is significant enough to warrant consideration.
There is a way of making it work for IE5/Win, and it’s quite simple. The trick is to make use
of the text-align property in the container’s parent element (in this case that is the <body>) to
center the container. The downside is that all child elements within <body> will now correctly
inherit that value and center all their content, which isn’t good. Therefore text-align: left is
applied to all main division elements to counter the centering:
/* Define default values for the whole site */
body {
text-align: center;
}
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px; border: 1px solid #000;
background: #CCC;
text-align: left;
}
This approach ensures that the container is centered horizontally in the browser window
whatever browser is used, and acts as the perfect basis for any centered design (see Figure 3-6).
For modern browsers, all this requires is a set width rule (as without it the box would naturally
stretch to fit its container—in this case the browser window) and the left and right margins
given the auto value. Building upon the earlier example, we have the following rule:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
Most browsers are happy with this, although IE5/Win fails miserably, usually aligning the
element to the left. At the time of writing, most IE users are using IE6, and IE7 is on the way, but
the percentage of IE5 users is significant enough to warrant consideration.
There is a way of making it work for IE5/Win, and it’s quite simple. The trick is to make use
of the text-align property in the container’s parent element (in this case that is the <body>) to
center the container. The downside is that all child elements within <body> will now correctly
inherit that value and center all their content, which isn’t good. Therefore text-align: left is
applied to all main division elements to counter the centering:
/* Define default values for the whole site */
body {
text-align: center;
}
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px; border: 1px solid #000;
background: #CCC;
text-align: left;
}
This approach ensures that the container is centered horizontally in the browser window
whatever browser is used, and acts as the perfect basis for any centered design (see Figure 3-6).
Css Tutorial : Margin Shortcuts
A couple of easy shortcuts are available to reduce up to four margin:value declarations into one.
/* Basic container */
#container {
margin: 20px auto 1em auto;
}
The order of the values is very important here. The order is top (20px), right (auto), bottom
(1em), and right (auto). It helps to get used to the order by thinking of it like a compass—north,
east, south, and west, the first value always being north, or like a clock—12 o’clock, 3 o’clock,
6 o’clock, and 9 o’clock, the first value being 12 o’clock.
If all four values are the same, the declaration can be shortened even further:
/* Basic container */
#container {
margin: 20px;
}
These shortcuts will also work for padding and some other properties, which you’ll find out
more about later.
/* Basic container */
#container {
margin: 20px auto 1em auto;
}
The order of the values is very important here. The order is top (20px), right (auto), bottom
(1em), and right (auto). It helps to get used to the order by thinking of it like a compass—north,
east, south, and west, the first value always being north, or like a clock—12 o’clock, 3 o’clock,
6 o’clock, and 9 o’clock, the first value being 12 o’clock.
If all four values are the same, the declaration can be shortened even further:
/* Basic container */
#container {
margin: 20px;
}
These shortcuts will also work for padding and some other properties, which you’ll find out
more about later.
Css Tutorial : Margin Declarations
Margin
The margin property does exactly what it says on the tin. It is used to declare the margin between
an (X)HTML element and those elements outside of it. The margin can be set for the top, left,
right, and bottom of the given element. Note that margin values are not inherited from parent
elements. If they were, there would be chaos.
Margin Declarations
There are three choices of values for the margin property, which are length, percentage, or auto.
Note that if a value is 0, you do not need to add px.
Consider the following CSS for a container div. Note that it has a fixed width of 300px and
no margin properties.
/* Basic container */
#container {
width:300px;
border: 1px solid #000;
padding: 20px;
background: #CCC;
}
padding values declared in the <body> element.
/* Basic container */
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding: 20px;
background: #CCC;
}
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding: 20px;
background: #CCC;
}
Subscribe to:
Posts (Atom)