CSS边距margin CSS边距margin|CSS2

本文概述

CSS边距margin属性
CSS边距margin值
CSS边距示例
边距margin：简写属性
1）边距margin：50px 100px 150px 200px;
2）边距：50px 100px 150px;
3）边距margin：50px 100px;
4）边距：50px；

CSS Margin属性用于定义元素周围的空间。它是完全透明的, 没有任何背景色。清除元素周围的区域。

顶部, 底部, 左侧和右侧的边距可以使用单独的属性独立更改。你还可以通过使用速记边距属性来一次更改所有属性。
有以下CSS边距属性：
CSS边距margin属性

属性	描述
margin	此属性用于在一个声明中设置所有属性。
margin-left	用于设置元素的左边距。
margin-right	用于设置元素的右边距。
margin-top	用于设置元素的上边距。
margin-bottom	用于设置元素的底边距。

CSS边距margin值这些是边距margin属性的一些可能值。

值	描述
auto	这用于让浏览器计算边距。
length	它用于指定边距pt, px, cm等。其默认值为0px。
%	它用于定义包含元素宽度百分比的边距。
inherit	它用于从父元素继承边距。

注意：你也可以使用负值来重叠内容。CSS边距示例你可以为元素的不同面定义不同的边距。

< !DOCTYPE html> < html> < head> < style> p { background-color: pink; } p.ex { margin-top: 50px; margin-bottom: 50px; margin-right: 100px; margin-left: 100px; } < /style> < /head> < body> < p> This paragraph is not displayed with specified margin. < /p> < p class="ex"> This paragraph is displayed with specified margin.< /p> < /body> < /html>

输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。
边距margin：简写属性CSS速记属性用于缩短代码。它在一个属性中指定所有边距属性。
有四种类型可以指定margin属性。你可以使用其中之一。

边距：50px 100px 150px 200px;
边距：50px 100px 150px;
边距：50px 100px;
边距50px;

1）边距margin：50px 100px 150px 200px; 它表明：
上边距值为50px
【CSS边距margin】右边距值为100px
底边距值为150px
左边距值为200px

< !DOCTYPE html> < html> < head> < style> p { background-color: pink; } p.ex { margin: 50px 100px 150px 200px; } < /style> < /head> < body> < p> This paragraph is not displayed with specified margin. < /p> < p class="ex"> This paragraph is displayed with specified margin.< /p> < /body> < /html>

输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。
2）边距：50px 100px 150px; 它表明：
上边距值为50px
左右边距值为100px
底边距值为150px

< !DOCTYPE html> < html> < head> < style> p { background-color: pink; } p.ex { margin: 50px 100px 150px; } < /style> < /head> < body> < p> This paragraph is not displayed with specified margin. < /p> < p class="ex"> This paragraph is displayed with specified margin.< /p> < /body> < /html>

输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。
3）边距margin：50px 100px; 它表明：
顶部和底部边距值为50px
左右边距值为100px

< !DOCTYPE html> < html> < head> < style> p { background-color: pink; } p.ex { margin: 50px 100px; } < /style> < /head> < body> < p> This paragraph is not displayed with specified margin. < /p> < p class="ex"> This paragraph is displayed with specified margin.< /p> < /body> < /html>

输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。
4）边距：50px；它表明：
右上角左下角的值是50px

< !DOCTYPE html> < html> < head> < style> p { background-color: pink; } p.ex { margin: 50px; } < /style> < /head> < body> < p> This paragraph is not displayed with specified margin. < /p> < p class="ex"> This paragraph is displayed with specified margin.< /p> < /body> < /html>

输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。