Article From:https://www.cnblogs.com/zoulixiang/p/9969440.html
CSS Margin
The blank area around the element border is the outer margin. Setting an outer margin creates additional "blanks" outside the element.

The easiest way to set the outer margin is to use the margin attribute, which accepts any length unit, percentage value or even negative value.

################

CSS Outer margin property
Attribute description
margin Short attributes. Set all outer margin properties in a declaration.
margin-bottom Set the lower and outer margins of the element.
margin-left Set the left margin of the element.
margin-right Set the right margin of the element.
margin-top Set the upper and outer margins of the element.
####################

1.Set the left margin of the text
This example demonstrates how to set the left margin of text.
<style type="text/css">
p.leftmargin {margin-left:1cm}
</style>
</head>
<body>
<p>This paragraph does not specify & lt; / P & gt;
<p class="leftmargin"> This paragraph has the specified left outer margin & lt; / P & gt;
</body>

2.Set the right margin of the text
This example demonstrates how to set the right margin of text.
<style type="text/css">
p.rightmargin {margin-right: 8cm}
</style>
</head>
<body>
<p>This paragraph does not specify & lt; / P & gt;
<p class="rightmargin"> This paragraph has the specified right margin. < /p>
</body>

3.Set the upper and outer margins of the text
This example demonstrates how to set the upper and outer margins of text.
<style type="text/css">
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
<p>This paragraph does not specify & lt; / P & gt;
<p class="topmargin"> This paragraph specifies the upper and outer margins. < /p>
</body>

4.Set the lower outer margin of the text
This example demonstrates how to set the lower and outer margins of text.

<style type="text/css">
p.bottommargin {margin-bottom:2cm}

</style>
</head>
<body>
<p>This paragraph does not specify the outer margin & lt; / P & gt;
<p class="bottommargin">This paragraph specifies the outer margin. < /p>
</body>

5.All outer margin attributes are in one declaration.
This example demonstrates how to set all outer margin properties in a declaration.
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>

<body>

<p>This paragraph does not specify an outer margin. < /p>

<p class="margin">This paragraph has a specified margin. This paragraph has a specified margin. This paragraph has a specified margin. This paragraph has a specified margin. This paragraph has a specified margin. < /p>

<p>This paragraph does not specify an outer margin. < /p>

</body>

Link of this Article: CSS outer margin

Leave a Reply

Your email address will not be published. Required fields are marked *