Coding Schools

How to add CSS in HTML
Types of CSS Files
Flex in CSS
Media Query in CSS
CSS - background attribute
CSS - border
css - border-image
CSS align attributes
CSS color attribute
CSS cursor attribute
CSS display attribute
CSS font attributes
CSS height and max-height
CSS width and max-width
CSS padding attributes
CSS margin attributes
CSS mask attributes
CSS overflow attributes
CSS opacity attribute
CSS text decoration attributes
CSS visibility attribute
CSS word attributes
CSS z-index attribute

CSS margin attributes

The margin property in CSS is used to create space around elements, outside of any defined borders. You can set margins for all sides at once, or individually for each side.

Basic Usage

You can set the margin using the shorthand property or the individual properties:

1. Shorthand Property

Sets the margin for all four sides (top, right, bottom, and left) in one declaration:

css

.element {
    margin: 10px; /* Equal margin on all sides */
    margin: 10px 20px; /* Vertical | Horizontal */
    margin: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
}

2. Individual Properties

Allows you to set the margin for each side separately:

css

.element {
    margin-top: 10px;    /* Top margin */
    margin-right: 20px;  /* Right margin */
    margin-bottom: 30px; /* Bottom margin */
    margin-left: 40px;   /* Left margin */
}

Examples

Here are a few examples to illustrate different margin scenarios:

Equal Margin on All Sides

css

.element {
    margin: 15px; /* 15 pixels margin on all sides */
}

Vertical and Horizontal Margin

css

.element {
    margin: 10px 20px; /* 10 pixels top and bottom, 20 pixels left and right */
}

Different Margin for Each Side

css

.element {
    margin: 5px 10px 15px 20px; /* 5 pixels top, 10 pixels right, 15 pixels bottom, 20 pixels left */
}

Individual Margin Properties

css

.element {
    margin-top: 5px;     /* 5 pixels top */
    margin-right: 10px;  /* 10 pixels right */
    margin-bottom: 15px; /* 15 pixels bottom */
    margin-left: 20px;   /* 20 pixels left */
}

Feel free to use these margin properties to adjust the spacing around your elements! Let me know if you need more details or examples.