What are the two types of margin properties in css3?-Front-end Q&A-php.cn

What are the two types of margin properties in css3?

青灯夜游

Release： 2022-01-13 15:16:08

Original

2550 people have browsed it

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>

Copy after login

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>

Copy after login

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!