Home » CSS

Margins in CSS

CSS Margins: Here, we are going to learn about the margin properties in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on November 01, 2019

CSS margin property

CSS Margins are used to space around any element, for this we use "margin" property in the CSS.

Syntax:

    Element{
        margin: length|auto|initial|inherit;
    }

Margin Collapsing

When two margins are touching each other vertically, they are collapsed. But when they touch horizontally, they do not collapse.

Example:

<!DOCTYPE html>

<head>
    <style>
        div {
            margin: 20px;
        }
    </style>
</head>
<html>

<body>
    <div>
        Some content
    </div>
    <div>
        Some more content
    </div>
</body>

</html>

Output

Margins in CSS | Example 1

They will be 20px apart since vertical margins collapse over one and other. (The spacing will not be the sum of two margins.)

Apply Margin on a Given Side

In CSS you can specify a given side to apply a margin too. The four properties provided for this purpose are,

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

Example:

<!DOCTYPE html>

<head>
    <style>
        #myDiv {
            margin-left: 30px;
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<html>

<body>
    <div id="myDiv">
        Some content
    </div>
</body>

</html>

Output

Margins in CSS | Example 2

Negative Margins

CSS has properties that can be set to negative values. This property can be used to overlap elements without absolute positioning.

Example:

<!DOCTYPE html>

<head>
    <style>
        .over {
            margin-left: -20px;
            background-color: #f40;
            color: #fff;
        }
    </style>
</head>
<html>

<body>
    <div class="over">
        Some content
    </div>
</body>

</html>

Output

Margins in CSS | Example 3

Margin property simplification

Here the shorthand is used to specify margin in every direction without writing for every direction.

Example:

<!DOCTYPE html>

<head>
    <style>
        p {
            margin: 1px;
            /* 1px margin in all directions */
            background-color: #f40;
            color: #fff;
        }
    </style>
</head>
<html>

<body>
    <p>
        Some content
    </p>
</body>

</html>

Output

Margins in CSS | Example 4

CSS for margin: length|auto|initial|inherit

    margin: 1px;
    margin: 1px 1px;
    margin: 1px 1px 1px;
    margin: 1px 1px 1px 1px;

Left, Right, Top and Bottom Margins

To provide margins for left, right, top and bottom to an object, we can use margin-left, margin-right, margin-top and margin-bottom properties respectively.

Example:

<!DOCTYPE html>

<head>
    <style>
        p {
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 20px;
            margin-bottom: 30px;
            /* 1px margin in all directions */
            background-color: #f40;
            color: #fff;
        }
    </style>
</head>
<html>

<body>
    <p>This is line One.</p>
    <p>This is line Two.</p>
    <p>This is line Three.</p>
    <p>This is line Four.</p>
</body>

</html>

Output

Margins in CSS | Example 5






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.