CSS - margin-block 属性_CSS 菜鸟教程

元素的逻辑块开始和结束边距由 margin-block CSS 简写属性指定。

元素的书写模式、方向性和文本方向决定了如何将这些逻辑边距转换为物理边距。
根据为 writing-mode、direction 和 text-orientation 提供的值，此属性引用 margin-top 和 margin-bottom 或 margin-right 和 margin-left 属性。
margin-block 属性允许使用一个或两个值。对于一个值，它将相同的边距应用于开始和结束。当指定了两个值时，第一个值适用于开始值，第二个值应用于结束值。

成分属性

此属性是以下 CSS 属性的简写：

可能的值

以下列表涵盖了 margin-block 属性的所有可能值。

<length> - 边距大小的固定值。
<percentage> - 相对于所包含块的内联大小或水平语言中书写模式定义的宽度所测量的边距的百分比。
auto - 浏览器选择要应用的适当边距。例如，此值有时可用于将元素居中。

适用于

所有元素（具有表格的元素除外）显示类型不是 table-caption、table 和 inline-table。它也适用于：：first-letter。

语法

margin-block = <'margin-top'>{1,2}

CSS margin-block - 长度值

以下示例演示了 margin-block with length value 的用法。

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #dfe4ed;
	 	}
	 	#customDIV {
	 	 	 height: 400px;
	 	 	 background-color: #edecb7;
	 	 	 padding: 20px;
	 	}
	 	.marginDemo {
	 	 	 width: 250px;
	 	 	 background-color: #65f252;
	 	 	 border: 2px dashed #4682B4;
	 	 	 margin-block: 25px;
	 	}
	 	.marginBox {
	 	 	 width: 250px;
	 	 	 background-color: #f5d902;
	 	 	 text-align: center;
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
<h1>Explore the margin-block property</h1>
<div id="customDIV">
	 	<p>Yellow div elements emphasize margins around the green box.</p>
	 	<div class="marginDemo">box</div>
	 	 	 <div class="marginBox">
	 	 	 	 	Example of margin-block property.
	 	 	 </div>
	 	<div class="marginDemo">box</div>
</div>
</body>
</html>

CSS margin-block - 百分比值

以下示例演示了 margin-block 与百分比值的用法。

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #F1ECEC;
	 	}
	 	#customDIV {
	 	 	 height: 400px;
	 	 	 background-color: #FFF7B0;
	 	 	 padding: 20px;
	 	}
	 	.marginDemo {
	 	 	 width: 250px;
	 	 	 background-color: #8B78B6;
	 	 	 border: 2px dashed #4682B4;
	 	 	 margin-block: 4% 6%;	
	 	}
	 	.marginBox {
	 	 	 width: 250px;
	 	 	 background-color: #F3994D;
	 	 	 text-align: center;
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
<h1>Explore the margin-block property</h1>
<div id="customDIV">
	 	<p>Orange div elements emphasize margins around the purple box.</p>
	 	 	 <div class="marginBox">box</div>
	 	 	 <div class="marginDemo">
	 	 	 	 	Example of margin-block property.
	 	 	 </div>
	 	<div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-block - 使用自动值

以下示例演示了值为 auto 的 margin-block 的用法。

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #F2EFEF;
	 	}
	 	#customDIV {
	 	 	 height: 400px;
	 	 	 background-color: #FFEEA8;
	 	 	 padding: 20px;
	 	}
	 	.marginDemo {
	 	 	 width: 250px;
	 	 	 background-color: #6495ED;
	 	 	 border: 4px dashed #4682B4;
	 	 	 margin-block: 2rem auto;
	 	}
	 	.marginBox {
	 	 	 width: 250px;
	 	 	 background-color: #FFA07A;
	 	 	 text-align: center;
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
<h1>Explore the margin-block property</h1>
<div id="customDIV">
<p>Orange div elements emphasize margins around the blue box.</p>
	 	<div class="marginBox">box</div>
	 	 	 <div class="marginDemo">
	 	 	 	 	Example of margin-block property.
	 	 	 </div>
	 	<div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-block - 使用写入模式

以下示例演示了 margin-block 与长度值和写入模式的用法：vertical-rl。

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #E3EAE9;
	 	}
	 	#customDIV {
	 	 	 height: 500px;
	 	 	 background-color: #FFEACB;
	 	 	 padding: 20px;
	 	}
	 	.marginDemo {
	 	 	 width: 50px;
	 	 	 background-color: #87CEEB;
	 	 	 border: 4px dashed #2E517F;
	 	 	 margin-block: 20px 20px;
	 	 	 writing-mode: vertical-rl;
	 	}
	 	.marginBox {
	 	 	 width: 150px;
	 	 	 background-color: #FF9A8B;
	 	 	 text-align: center;
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
<h1>Explore the margin-block property</h1>
<div id="customDIV">
	 	<p>Orange div elements emphasize margins around the blue box.</p>
	 	<div class="marginBox">box</div>
	 	 	 <div class="marginDemo">
	 	 	 	 	Example of margin-block property
	 	 	 </div>
	 	<div class="marginBox">box</div>
</div>
</body>
</html>

<< CSS - margin 属性 CSS - margin-block-end 属性 >>