Home  >  Article  >  Web Front-end  >  What are the two types of margin properties in css3?

What are the two types of margin properties in css3?

青灯夜游
青灯夜游Original
2022-01-13 15:16:082541browse

Two margin attributes of css3: 1. Inner margin attributes (padding, padding-top, etc.), which can set the space between the element border and element content; 2. External margin attributes (margin, margin -top, etc.) to set the space around the element.

What are the two types of margin properties in css3?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

There are two types of margins in css3:

  • Padding: the space between the element border and the element content

  • Margin: the space around the element

What are the two types of margin properties in css3?

##Padding properties

PropertiesDescriptionpaddingUse the shorthand attribute to set all padding properties in a declaration padding-bottomSet the bottom padding of the elementpadding-leftSet the element's bottom padding Left paddingpadding-rightSet the right padding of the elementpadding-topSet the top padding of the element
Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p
{
	background-color:yellow;
}
p.padding
{
	padding:25px 50px;
}
</style>
</head>

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

</html>

What are the two types of margin properties in css3?

Margin attribute

AttributeDescriptionmarginAbbreviation attribute. Set all margin properties in one statement. margin-bottomSet the bottom margin of the element. margin-left Set the left margin of the element. margin-right Set the right margin of the element. margin-topSet the top margin of the element.
Example:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p
{
	background-color:yellow;
}
p.margin
{
	margin:100px 50px;
}
</style>
</head>

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

</html>

What are the two types of margin properties in css3?

(Learning video sharing:

css video tutorial )

The above is the detailed content of What are the two types of margin properties in css3?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn