|
Home >> Tutorials/FAQs >> CSS Tutorials >> Index
CSS Tutorials - Specifying Padding Spaces of a Block Element
By: FYICenter.com
(Continued from previous topic...)
Hot To Specify Padding Spaces of a Block Element?
CSS offers 4 style properties to control padding spaces of a block element.
You can specify them in different ways as shown in the following CSS examples:
- {padding-top: 30px} - Specifies the top padding to 30 pixels.
- {padding-right: 10px} - Specifies the right padding to 10 pixels.
- {padding-bottom: 40px} - Specifies the bottom padding to 40 pixels.
- {padding-left: 20px} - Specifies the left padding to 20 pixels.
- {padding: 30px 10px 40px 20px;} - Specifies padding spaces on 4 sides: top, right, bottom and left.
When padding spaces are specified, the size of the content box will be reduced to give room
to meet the specified padding spaces on 4 sides. The size of the content box can be
calculated as:
Content width = "width" - "padding-left" - "padding-right"
Content height = "height" - "padding-top" - "padding-bottom"
(Continued on next topic...)
- What Is the HTML Element Formatting Model?
- What Are the Formatting Behaviors of HTML Elements?
- What Is a Block Element?
- What Is an Inline Element?
- What Is a Floating Element?
- Hot To Specify the Content Box Size of a Block Element?
- Hot To Specify Padding Spaces of a Block Element?
- Hot To Test Padding Spaces on All 4 Sides?
- How To Specify Borders of a Block Element?
- Hot To Test Borders with Different Widths, Styles, and Colors?
- How To Specify Margin Spaces of a Block Element?
- How To Test Margin Spaces on All 4 Sides?
- How To Specify the Color of the Margin Area?
- How To Specify the Color of the Padding Area?
- What Are the Background Properties of a Block Element?
- How To Set Background to Transparent or Non-transparent?
- How To Add Images to Backgrounds?
- What Is the Text Paragraph Formatting Model?
- How In-Line Elements Are Mixed in Text Lines?
- How In-line Elements Affect Line Box Heights?
- Is FORM a Block Element?
|