国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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中文網(wǎng)(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>這是一個(gè)沒(méi)有指定邊距大小的段落。</p>
<p class="margin">這是一個(gè)指定邊距大小的段落。</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中文網(wǎng)(php.cn)</title>
    <style>
        p
        {
            background-color:yellow;
        }
        p.margin
        {
            margin:100px 50px;
        }
    </style>
</head>

<body>
<p>這是一個(gè)沒(méi)有指定邊距大小的段落。</p>
<p class="margin">這是一個(gè)指定邊距大小的段落。</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中文網(wǎng)（php.cn）</title>
    <style>
        p{background-color: #8de943
        }
        p.ex1 {margin-top:2cm;}
        p.bottommargin {margin-bottom:25%;}
    </style>
</head>

<body>

<p>一個(gè)沒(méi)有指定邊距大小的段落。</p>
<p class="ex1">一個(gè)2厘米上邊距的段落。</p>

<p class="bottommargin">這是一個(gè)用百分比設(shè)置的下邊距大小的段落。</p>

</body>
</html>
Run the program to try it


Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文網(wǎng)（php.cn）</title> <style> p{background-color: #8de943 } p.ex1 {margin-top:2cm;} p.bottommargin {margin-bottom:25%;} </style> </head> <body> <p>一個(gè)沒(méi)有指定邊距大小的段落。</p> <p class="ex1">一個(gè)2厘米上邊距的段落。</p> <p class="bottommargin">這是一個(gè)用百分比設(shè)置的下邊距大小的段落。</p> </body> </html>
submitReset Code