Home >Web Front-end >Front-end Q&A >How to set margin in css
How to set margin in css
- 藏色散人Original
- 2021-04-19 09:39:174796browse
How to set margin in css: first create an HTML sample file; then define some text content through the p tag in the body; finally set the style "p.margin {margin: 2cm 4cm 3cm 4cm}".
The operating environment of this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.
margin shorthand property sets all margin properties in one declaration. This attribute can have 1 to 4 values.
Description
This shorthand property sets the width of all margins of an element, or sets the width of margins on each side.
The vertically adjacent margins of block-level elements will be merged, while inline elements will not actually occupy the top and bottom margins. The left and right margins of inline elements are not merged. Likewise, the margins of floated elements are not merged. It is allowed to specify negative margin values, but use caution when using them.
Note: Negative values are allowed.
Example:
<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>Effect;
[Recommended learning: css video tutorial]
Example 1
margin:10px 5px 15px 20px;
The top margin is 10px
The right margin is 5px
The bottom margin is 15px
The left margin is 20px
Example 2
margin:10px 5px 15px;
The top margin is 10px
The right and left margins are 5px
The bottom margin is 15px
Example 3
margin:10px 5px;
The top and bottom margins are 10px
The right and left margins are 5px
Example 4
margin:10px;
All The four margins are all 10px
The above is the detailed content of How to set margin in css. For more information, please follow other related articles on the PHP Chinese website!