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

<!DOCTYPE html>
<html>
    <head>
        <title>Margin Examples</title>
        <style>
            p {
                background-color: #4caf50;
                color: white;
            }
            .m {
                margin: 12px;
            }
            .mt {
                margin-top: 12px;
            }
            .ml {
                margin-left: 12px;
            }
            .mr {
                margin-right: 12px;
            }
            .mb {
                margin-botom: 12px;
            }
        </style>
    </head>
    <body>
        <p class="m">Paragraph text with equal margins for all sides</p>
        <p class="mt">Paragraph tezt with margin given at the top</p>
        <p class="ml">Paragraph tezt with margin given at the left</p>
        <p class="mr">Paragraph tezt with margin given at the right</p>
        <p class="mb">Paragraph tezt with margin given at the bottom</p>
    </body>
</html>

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

<!DOCTYPE html>
<html>
    <head>
        <title>Margin Examples</title>
        <style>
            p {
                background-color: #4caf50;
                color: white;
            }
            .m1 {
                margin: 10px;
            }
            .m2 {
                margin: 15px 10px;
            }
            .m3 {
                margin: 20px 15px 10px;
            }
            .m4 {
                margin: 25px 20px 15px 10px;
            }
        </style>
    </head>
    <body>
        <p class="m4">Paragraph text has differnt margins for each sides</p>
        <p class="m3">Paragraph text has differnt margins for Top, Right and Bottom sides</p>
        <p class="m2">Paragraph text has differnt margins for only Top and Right sides</p>
        <p class="m1">Paragraph text has equal margins for each sides</p>
    </body>
</html>

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

<!DOCTYPE html>
<html>
    <head>
        <title>Margin auto Examples</title>
        <style>
            .parent-container {
                width: 100%;
                text-align: center;
            }

            .centered-element {
                width: 200px;
                margin: 0 auto; /* Horizontally center the element */
                background-color: lightblue;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="parent-container">
            <div class="centered-element">Centered Element</div>
        </div>
    </body>
</html>

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

<!DOCTYPE html>
<html>
    <head>
        <title>Margin Inherit Examples</title>
        <style>
            .parent-box {
                width: 300px;
                margin: 20px;
                background-color: lightgreen;
            }

            .child-box {
                margin: inherit; /* Inherit margin from parent */
                background-color: lightyellow;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="parent-box">
            <div class="child-box">Child Box with Inherited Margin</div>
        </div>
    </body>
</html>

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 js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message