BMR EDUCATION Courses Coding Reference Online Tools Education GPT About Contact Login
Quick Recap Examples Quiz Compiler

CSS Margins

Used to create space around an HTML element.
There will be no default margin values for maximum of the HTML elements expect for some citiation elements.
we can declare the value of Margin in may ways. Negative values are also accepted
  • px (pixels)
  • pt (points)
  • em (ems)
  • % (percentage)
  • vh (viewport height)
  • rem (root em)
  • ch (character width)
  • xh (x-height)
These formats are applicable to many styles.
Here are the margin properties defines thier respective side
  • margin (gives margin for all sides)
  • margin-top (gives margin at the top)
  • margin-left (gives margin at the left)
  • margin-right (gives margin at the right)
  • margin-bottom (gives margin at the bottom)

Example

.m {
    margin: 12px;
}
.mt {
    margin-top: 12px;
}
.ml {
    margin-left: 12px;
}
.mr {
    margin-right: 12px;
}
.mb {
    margin-botom: 12px;
}
Run

Margin Sides

We can set the margin differently for all sides using margin property itself.
If you define only single value in the margin then it apples all the sides.
  • margin: 12px
Similarly If you define only two values in the margin then it apply to Top and Right sides.
  • Ex: margin: 12px 10px;
Similarly if you define three values in the margin then it apply to Top, Right and Bottom sides.
  • Ex: margin: 12px 10px 16px;
Similarly if you define four values in the margin then it apply to Top, Right, Bottom, Left.
  • Ex: margin: 12px 10px 16px 8px;

Example

.m1 {
    margin: 10px;
}
.m2 {
    margin: 15px 10px;
}
.m3 {
    margin: 20px 15px 10px;
}
.m4 {
    margin: 25px 20px 15px 10px;
}
Run

Margin Values

Margin property itself has a set of values to define, they are
  1. auto
  2. inherit

auto Value

using margin: auto; automatically distributes available space, which is often used for horizontal centering.

Example

.parent-container {
  width: 100%;
  text-align: center;
}

.centered-element {
  width: 200px;
  margin: 0 auto; /* Horizontally center the element */
  background-color: lightblue;
  padding: 10px;
}
Run
This value allows an element to inherit the margin value from its parent element. It can be used to make child elements inherit specific margin properties from their parent.

Example

.parent-box {
  width: 300px;
  margin: 20px;
  background-color: lightgreen;
}

.child-box {
  margin: inherit; /* Inherit margin from parent */
  background-color: lightyellow;
  padding: 10px;
}
Run

Quick Recap

Topics Covered

Property

Description

Example

margin

Create's space around an HTML element.

Run

margin-top

Create's space on top of HTML element.

Run

margin-left

Create's space on left of HTML element.

Run

margin-right

Create's space on right of HTML element.

Run

margin-bottom

Create's space on bottom of HTML element.

Run

auto

automatically distributes available space.

Run

inherit

Allows an element to inherit the margin value from its parent element.

Run

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example 1

Example 1 Example 2 Example 3 Example 4 Example 5

Quiz

FEEDBACK

Rating


Message