Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - Specifying Margin Spaces of a Block Element

By: FYICenter.com

(Continued from previous topic...)

How To Specify Margin Spaces of a Block Element?

CSS offers 4 style properties to control margin spaces of a block element. You can specify them in different ways as shown in the following CSS examples:

  • {margin-top: 30px} - Specifies the top margin to 30 pixels.
  • {margin-right: 10px} - Specifies the right margin to 10 pixels.
  • {margin-bottom: 40px} - Specifies the bottom margin to 40 pixels.
  • {margin-left: 20px} - Specifies the left margin to 20 pixels.
  • {margin: 30px 10px 40px 20px;} - Specifies margin space on 4 sides: top, right, bottom and left.

When margin spaces are specified, the size of the content box will not be reduced to give room to meet the specified margin spaces. But the element full size will be increased to give room to meet the specified margin spaces on all 4 sides

(Continued on next topic...)

  1. What Is the HTML Element Formatting Model?
  2. What Are the Formatting Behaviors of HTML Elements?
  3. What Is a Block Element?
  4. What Is an Inline Element?
  5. What Is a Floating Element?
  6. Hot To Specify the Content Box Size of a Block Element?
  7. Hot To Specify Padding Spaces of a Block Element?
  8. Hot To Test Padding Spaces on All 4 Sides?
  9. How To Specify Borders of a Block Element?
  10. Hot To Test Borders with Different Widths, Styles, and Colors?
  11. How To Specify Margin Spaces of a Block Element?
  12. How To Test Margin Spaces on All 4 Sides?
  13. How To Specify the Color of the Margin Area?
  14. How To Specify the Color of the Padding Area?
  15. What Are the Background Properties of a Block Element?
  16. How To Set Background to Transparent or Non-transparent?
  17. How To Add Images to Backgrounds?
  18. What Is the Text Paragraph Formatting Model?
  19. How In-Line Elements Are Mixed in Text Lines?
  20. How In-line Elements Affect Line Box Heights?
  21. Is FORM a Block Element?

Selected Developer Jobs:

More...