CSS Margin (margin)

CSS Margin(margin)

CSS Margin(margin) property defines the space around the element.

##Margin

margin clears surrounding elements (outer border) area. Margin has no background color and is completely transparent

margin can change the top, bottom, left, and right margins of the element independently. It is also possible to change all properties at once. Units can use pixels, percentages, centimeters, etc.

##CSS margin properties

In CSS, it can specify different margins for different sides

Attributesmarginmargin-bottommargin-leftmargin-rightmargin-top

Description
Abbreviation attribute. Set all margin properties in one statement.
Set the bottom margin of the element.
Set the left margin of the element.
Set the right margin of the element.
Set the top margin of the element.

##Example

Setting the margins on different sides

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            background-color:yellow;
        }
        p.margin
        {
            margin-top:100px;
            margin-bottom:100px;
            margin-right:50px;
            margin-left:50px;
        }
    </style>
</head>

<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>

</html>

Run the program and try it out

Margin - shorthand attribute

To shorten the code, it is possible to use all edges specified by margin in one attribute distance attribute. This is called an abbreviation attribute.

The abbreviation property of all margin properties is "margin":

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            background-color:yellow;
        }
        p.margin
        {
            margin:100px 50px;
        }
    </style>
</head>

<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>

</html>

Run the program to try it

The margin attribute can have one to four values

margin

:25px 50px 75px 100px;

The top margin is 25px

The right margin is 50px

The bottom margin is 75px

The left margin is 100px

margin

:25px 50px 75px;

The top margin is 25px

The left and right margins are 50px

The bottom margin is 75px

margin

:25px 50px;

The top and bottom margins are 25px

The left and right margins are 50px

margin

:25px;

All 4 margins are 25px

##More examples

Set margins using centimeter and percentage values

         <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网（php.cn）</title>
    <style>
        p{background-color: #8de943
        }
        p.ex1 {margin-top:2cm;}
        p.bottommargin {margin-bottom:25%;}
    </style>
</head>

<body>

<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个2厘米上边距的段落。</p>

<p class="bottommargin">这是一个用百分比设置的下边距大小的段落。</p>

</body>
</html>

Run the program to try it

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网（php.cn）</title> <style> p{background-color: #8de943 } p.ex1 {margin-top:2cm;} p.bottommargin {margin-bottom:25%;} </style> </head> <body> <p>一个没有指定边距大小的段落。</p> <p class="ex1">一个2厘米上边距的段落。</p> <p class="bottommargin">这是一个用百分比设置的下边距大小的段落。</p> </body> </html>

submit Reset Code

Automatic operation

CSS Margin (margin)

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]