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 padding. Show all posts
Showing posts with label padding. Show all posts
Monday, October 4, 2010
Padding Shortcuts in Css
The same shortcuts used for margin values are also available for padding.
/* Basic container */
#container {
padding: 20px 1em 0 10%;
}
As with the margin property, order is top (20px), right (1em), bottom (0), and right (10px).
Likewise, if all four values are the same, the padding declaration can also be shortened like so:
/* Basic container */
#container {
padding: 20px;
}
/* Basic container */
#container {
padding: 20px 1em 0 10%;
}
As with the margin property, order is top (20px), right (1em), bottom (0), and right (10px).
Likewise, if all four values are the same, the padding declaration can also be shortened like so:
/* Basic container */
#container {
padding: 20px;
}
Padding : Padding Declarations in Css
Padding
Padding is the distance between the edges (borders) of an (X)HTML element and the content
within it, and can be applied to any element.
Padding Declarations
Both length and percentage values are available, although there is no auto value, and negative
values cannot be declared for padding.
Let’s take the container div again, and this time add custom padding to each side:
/* Basic container */
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding-top: 20px;
padding-left: 10%;
padding-right: 1em;
padding-bottom: 0;
background: #CCC;
}
Figure 3-7 shows how the paragraph within the container (highlighted by a thin border) is
spaced away from each edge by the given padding value.Percentage in this case refers directly to the parent element’s width. So if padding-left:
10% is declared, that equates to 10% of the parent element’s given width.
values cannot be declared for padding.
Let’s take the container div again, and this time add custom padding to each side:
/* Basic container */
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding-top: 20px;
padding-left: 10%;
padding-right: 1em;
padding-bottom: 0;
background: #CCC;
}
Figure 3-7 shows how the paragraph within the container (highlighted by a thin border) is
spaced away from each edge by the given padding value.Percentage in this case refers directly to the parent element’s width. So if padding-left:
10% is declared, that equates to 10% of the parent element’s given width.
Wednesday, September 29, 2010
Adding padding, margins, and backgrounds to a layout
1. Add a page background. In the add-starting-point folder, there are two images,
both of which are gradients. One is a black gradient, fading toward gray at its bottom
edge; this is intended for a page background. Add this by adding the following
rule to the style sheet (after the add your code below comment):
body {
background: #4d4d4d url(page-background.gif) repeat-x;
}
The repeat-x value ensures that the background tiles horizontally only; the color
value #4d4d4d is the color of the bottom pixel of the gradient image, ensuring the
gradient seamlessly blends with the web page background.
both of which are gradients. One is a black gradient, fading toward gray at its bottom
edge; this is intended for a page background. Add this by adding the following
rule to the style sheet (after the add your code below comment):
body {
background: #4d4d4d url(page-background.gif) repeat-x;
}
The repeat-x value ensures that the background tiles horizontally only; the color
value #4d4d4d is the color of the bottom pixel of the gradient image, ensuring the
gradient seamlessly blends with the web page background.
2. Add a border to the wrapper. Amend the #wrapper rule to add a border around
the wrapper. Note that the wrapper in this example sits flush with the top edge of
the browser window view area, and so no top border is needed. That’s why the
border-top pair is added, overriding the previous rule for the top border only.
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
}
the wrapper. Note that the wrapper in this example sits flush with the top edge of
the browser window view area, and so no top border is needed. That’s why the
border-top pair is added, overriding the previous rule for the top border only.
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
}
3. Add a wrapper background. If you test the page now, the background shows
behind all of the page’s content, thereby making it unreadable. Therefore, add the
background pair to the rule, which sets a background color for the wrapper div,
and also sets the second image in the add-starting-point folder (a white-to-lightgray
vertical gradient) to tile horizontally at the bottom of the div: Add a wrapper background. If you test the page now, the background shows
behind all of the page’s content, thereby making it unreadable. Therefore, add the
background pair to the rule, which sets a background color for the wrapper div,
and also sets the second image in the add-starting-point folder (a white-to-lightgray
vertical gradient) to tile horizontally at the bottom of the div:
behind all of the page’s content, thereby making it unreadable. Therefore, add the
background pair to the rule, which sets a background color for the wrapper div,
and also sets the second image in the add-starting-point folder (a white-to-lightgray
vertical gradient) to tile horizontally at the bottom of the div: Add a wrapper background. If you test the page now, the background shows
behind all of the page’s content, thereby making it unreadable. Therefore, add the
background pair to the rule, which sets a background color for the wrapper div,
and also sets the second image in the add-starting-point folder (a white-to-lightgray
vertical gradient) to tile horizontally at the bottom of the div:
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
}
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
}
4. Add some padding. Test the page now and you’ll see two major layout errors commonly
seen on the Web. First, the content hugs the edges of the div, which makes
it hard to read and also looks cluttered, despite the div being 600 pixels wide.
Secondly, the text at the bottom of the div is displayed over the gradient—it’s still
readable, but it looks a little messy. By adding padding (more to the bottom edge,
to account for the gradient), these issues are dealt with:
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
padding: 20px 20px 50px;
}
Monday, September 27, 2010
Cell spacing and cell padding
In addition to amending the border size, it’s possible to change the amount of padding
within a table’s cells, as well as the spacing between all the cells in a table. This is done with
the cellpadding and cellspacing attributes, respectively. In the rather extreme example
that follows, cellpadding is set to 20, cellspacing to 40, and border to 5, so that each
can be differentiated with ease (see the subsequent screenshot). As you can see,
cellspacing not only affects the spacing between the cells, but also the distance between the cells and the table’s edges. (The CSS property border-spacing is intended to do the
same thing as cellspacing, but Internet Explorer to version 7 doesn’t support it.)
<table cellpadding="20" cellspacing="40" border="5">
<tr><td>Cell one</td><td>Cell two</td></tr>
<tr><td>Cell three</td><td>Cell four</td></tr>
</table>
You might be thinking that design-wise, this example sucks, and you’d be right. The chunko-
vision 3D border isn’t particularly tasteful. However, you can omit the border attribute
and use CSS to style borders instead—see the “Styling a table” section later on in this
chapter. That section also details how to set padding in CSS, which provides you with sitewide
control over cell padding. CSS also gives you much finer control over the individual
elements in a table—whereas the inline HTML attributes impose a one-style-fits-all
straightjacket.
within a table’s cells, as well as the spacing between all the cells in a table. This is done with
the cellpadding and cellspacing attributes, respectively. In the rather extreme example
that follows, cellpadding is set to 20, cellspacing to 40, and border to 5, so that each
can be differentiated with ease (see the subsequent screenshot). As you can see,
cellspacing not only affects the spacing between the cells, but also the distance between the cells and the table’s edges. (The CSS property border-spacing is intended to do the
same thing as cellspacing, but Internet Explorer to version 7 doesn’t support it.)
<table cellpadding="20" cellspacing="40" border="5">
<tr><td>Cell one</td><td>Cell two</td></tr>
<tr><td>Cell three</td><td>Cell four</td></tr>
</table>
You might be thinking that design-wise, this example sucks, and you’d be right. The chunko-
vision 3D border isn’t particularly tasteful. However, you can omit the border attribute
and use CSS to style borders instead—see the “Styling a table” section later on in this
chapter. That section also details how to set padding in CSS, which provides you with sitewide
control over cell padding. CSS also gives you much finer control over the individual
elements in a table—whereas the inline HTML attributes impose a one-style-fits-all
straightjacket.
Subscribe to:
Posts (Atom)