Home > Tutorials > CSS > Box Attributes
Box Attributes
Now we have some background and foreground colors, and while those may be nice, there's still a lot of formatting to be done. With that, let's look at width, height, padding, and margin:
- width
- Specifies the width of the current element. Accepted values are any absolute or relative length.
- height
- Specifies the height of the current element. Accepted values are any absolute or relative length.
- padding
- Specifies the padding, or the space between content and the edge of the element, of the current element. Accepted values are any absolute or relative length.
- margin
- Specifies the margin, or the space between elements, of the current element. Accepted values are any absolute or relative length.
- float
- Specifies which side of the parent element the element should float to. Accepted values:
- left
- right
Padding and margin can be specified in a number of ways, as you have four directions (top, bottom, left, and right) to think of. The following are acceptable ways to describe either padding or margin:
margin-<direction>: 4px- applies 4px margin to <direction>. <direction> can be top, bottom, left, or rightmargin: 40%- applies 40% margin to all sidesmargin: 5px 3px- applies 5px margin to top and bottom, 3px margin to left and rightmargin: 5px 3% 2px- applies 5px margin to top, 3% margin to left and right, and 2px margin to bottommargin: 5px 4px 3px 2px- applies 5px margin to top, 4px margin to right, 3px margin to bottom, 2px margin to left
Note: padding is used in the exact same manner as above, just substitute "padding" where it says "margin".
Excercise: Open "MyFirstPage.html". Make at least one use of three of the above CSS attributes.
If your code looks like mine, you've succeeded, and can go on to another lesson.
Comment on this page:
Comments
No one has commented on this lesson yet. You can be the first!