Curriculum
Course: CSS
Login

Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1
Text lesson

Margins

CSS Margins

CSS margin properties enable the creation of space around elements, independent of any defined borders.

With CSS, you possess complete authority over margins. Various properties allow you to set margins for individual sides of an element, including top, right, bottom, and left.

Margin – Individual Sides

CSS features properties to designate the margin for every side of an element.

  • Top margin
  • right margin
  • bottom margin
  • left margin

The following values can be assigned to all margin properties:

Here are the possible values for all margin properties:

  • auto: The browser calculates the margin.
  • length: Specifies a margin in pixels, points, centimeters, etc.
  • %: Specifies a margin as a percentage of the width of the containing element.
  • inherit: Specifies that the margin should inherit from the parent element.

 

Tip: Negative values are permissible.

Example

Assign distinct margins to each of the four sides of a <p> element.

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Margin – Shorthand Property

To condense the code, you can specify all margin properties using a single shorthand property.

The margin property serves as a shorthand for the following individual margin properties:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Here’s how it functions:

If the margin property contains four values:

  • margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

Example

Use the margin shorthand property with four specified values.

p {
  margin: 25px 50px 75px 100px;
}

If the margin property is set using three values.

  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

Example

Apply the margin shorthand property with three values.

p {
  margin: 25px 50px 75px;
}

If the margin property is set with two values.

  •  margin: 25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px
  •  

Example

Apply the margin shorthand property with two values.

p {
  margin: 25px 50px;
}

If the margin property is set with one value.

  • margin: 25px;
    • all four margins are 25px

Example

Apply the margin shorthand property with a single value.

p {
  margin: 25px;
}

The auto Value

You can set the margin property to auto to center the element horizontally within its container. This will make the element occupy the specified width, with the remaining space evenly distributed between the left and right margins.

Example

Use margin: auto:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

The inherit Value

This example allows the left margin of the <p class=”ex1″>  element to be inherited from its parent element (<div>):

Example

Using the inherit value:

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

All CSS Margin Properties

Property

Description

margin

A single declaration shorthand for configuring all margin properties.

margin-bottom

Specifies the margin at the bottom of an element.

margin-left

Specifies the margin on the left side of an element.

margin-right

Specifies the margin on the right side of an element.

margin-top

Specifies the margin at the top of an element.

 

 

Previous
Next