逻辑边距与填充属性详解
概述
本文档系统讲解 逻辑边距与填充属性详解 中的各个属性。每个属性都配有来自 MDN 的可交互演示，可以直接点击运行查看效果。
Margin 逻辑属性
margin-block
逻辑属性：设置块方向（上/下）的外边距。
margin-block 交互演示（MDN）
逻辑属性：设置块方向（上/下）的外边距。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>margin-block 属性演示 - MDN 示例</title>
<meta name="description" content="演示margin（block 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.row {
height: 33.33%;
display: inline-block;
border: solid #ce7777 10px;
background-color: #2b3a55;
color: #ffffff;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">margin-block: 10px 20px;</button>
<button class="snippet-btn" data-index="1">margin-block: 20px 40px;</button>
<button class="snippet-btn" data-index="2">margin-block: 5% 20%;</button>
<button class="snippet-btn" data-index="3">margin-block: 1rem auto;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div id="container">
<div class="row">One</div>
<div class="row transition-all" id="example-element">Two</div>
<div class="row">Three</div>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
margin-block: 10px 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
margin-block: 20px 40px;
writing-mode: vertical-rl;
}`,
`#example-element {
margin-block: 5% 20%;
writing-mode: horizontal-tb;
}`,
`#example-element {
margin-block: 1rem auto;
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
margin-block-start
逻辑属性：设置块起始方向的外边距。
margin-block-start 交互演示（MDN）
逻辑属性：设置块起始方向的外边距。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>margin-block-start 属性演示 - MDN 示例</title>
<meta name="description" content="演示margin（block-start 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.row {
height: 33.33%;
display: inline-block;
border: solid #ce7777 10px;
background-color: #2b3a55;
color: #ffffff;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">margin-block-start: 20px;</button>
<button class="snippet-btn" data-index="1">margin-block-start: 20px;</button>
<button class="snippet-btn" data-index="2">margin-block-start: 20%;</button>
<button class="snippet-btn" data-index="3">margin-block-start: auto;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div id="container">
<div class="row">One</div>
<div class="row transition-all" id="example-element">Two</div>
<div class="row">Three</div>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
margin-block-start: 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
margin-block-start: 20px;
writing-mode: vertical-rl;
}`,
`#example-element {
margin-block-start: 20%;
writing-mode: horizontal-tb;
}`,
`#example-element {
margin-block-start: auto;
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
margin-block-end
逻辑属性：设置块结束方向的外边距。
margin-block-end 交互演示（MDN）
逻辑属性：设置块结束方向的外边距。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>margin-block-end 属性演示 - MDN 示例</title>
<meta name="description" content="演示margin（block-end 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.row {
height: 33.33%;
display: inline-block;
border: solid #ce7777 10px;
background-color: #2b3a55;
color: #ffffff;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">margin-block-end: 20px;</button>
<button class="snippet-btn" data-index="1">margin-block-end: 20px;</button>
<button class="snippet-btn" data-index="2">margin-block-end: 20%;</button>
<button class="snippet-btn" data-index="3">margin-block-end: auto;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div id="container">
<div class="row">One</div>
<div class="row transition-all" id="example-element">Two</div>
<div class="row">Three</div>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
margin-block-end: 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
margin-block-end: 20px;
writing-mode: vertical-rl;
}`,
`#example-element {
margin-block-end: 20%;
writing-mode: horizontal-tb;
}`,
`#example-element {
margin-block-end: auto;
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
margin-inline
逻辑属性：设置行方向（左/右）的外边距。
margin-inline 交互演示（MDN）
逻辑属性：设置行方向（左/右）的外边距。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>margin-inline 属性演示 - MDN 示例</title>
<meta name="description" content="演示margin（inline 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
justify-content: flex-start;
}
.col {
width: 33.33%;
border: solid #ce7777 10px;
background-color: #2b3a55;
color: white;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">margin-inline: 5% 10%;</button>
<button class="snippet-btn" data-index="1">margin-inline: 10px 40px;</button>
<button class="snippet-btn" data-index="2">margin-inline: 5% 10%;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div id="container">
<div class="col">One</div>
<div class="col transition-all" id="example-element">Two</div>
<div class="col">Three</div>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
margin-inline: 5% 10%;
writing-mode: horizontal-tb;
}`,
`#example-element {
margin-inline: 10px 40px;
writing-mode: vertical-rl;
}`,
`#example-element {
margin-inline: 5% 10%;
writing-mode: horizontal-tb;
direction: rtl;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
margin-inline-start
逻辑属性：设置行起始方向的外边距。
margin-inline-start 交互演示（MDN）
逻辑属性：设置行起始方向的外边距。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>margin-inline-start 属性演示 - MDN 示例</title>
<meta name="description" content="演示margin（inline-start 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
justify-content: flex-start;
}
.col {
width: 33.33%;
border: solid #ce7777 10px;
background-color: #2b3a55;
color: white;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">margin-inline-start: 20px;</button>
<button class="snippet-btn" data-index="1">margin-inline-start: 20px;</button>
<button class="snippet-btn" data-index="2">margin-inline-start: 20%;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div id="container">
<div class="col">One</div>
<div class="col transition-all" id="example-element">Two</div>
<div class="col">Three</div>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
margin-inline-start: 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
margin-inline-start: 20px;
writing-mode: vertical-rl;
}`,
`#example-element {
margin-inline-start: 20%;
writing-mode: horizontal-tb;
direction: rtl;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
margin-inline-end
逻辑属性：设置行结束方向的外边距。
margin-inline-end 交互演示（MDN）
逻辑属性：设置行结束方向的外边距。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>margin-inline-end 属性演示 - MDN 示例</title>
<meta name="description" content="演示margin（inline-end 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
justify-content: flex-start;
}
.col {
width: 33.33%;
border: solid #ce7777 10px;
background-color: #2b3a55;
color: white;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">margin-inline-end: 20px;</button>
<button class="snippet-btn" data-index="1">margin-inline-end: 20px;</button>
<button class="snippet-btn" data-index="2">margin-inline-end: 20%;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div id="container">
<div class="col">One</div>
<div class="col transition-all" id="example-element">Two</div>
<div class="col">Three</div>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
margin-inline-end: 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
margin-inline-end: 20px;
writing-mode: vertical-rl;
}`,
`#example-element {
margin-inline-end: 20%;
writing-mode: horizontal-tb;
direction: rtl;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
Padding 逻辑属性
padding-block
逻辑属性：设置块方向的内边距。
padding-block 交互演示（MDN）
逻辑属性：设置块方向的内边距。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>padding-block 属性演示 - MDN 示例</title>
<meta name="description" content="盒模型示例：padding（block 属性演示）。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">padding-block: 10px 20px;</button>
<button class="snippet-btn" data-index="1">padding-block: 20px 40px;</button>
<button class="snippet-btn" data-index="2">padding-block: 5% 10%;</button>
<button class="snippet-btn" data-index="3">padding-block: 2em 4em;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies
a small unregarded yellow sun.
</div>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
padding-block: 10px 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
padding-block: 20px 40px;
writing-mode: vertical-rl;
}`,
`#example-element {
padding-block: 5% 10%;
writing-mode: horizontal-tb;
}`,
`#example-element {
padding-block: 2em 4em;
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
padding-block-start
逻辑属性：设置块起始方向的内边距。
padding-block-start 交互演示（MDN）
逻辑属性：设置块起始方向的内边距。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>padding-block-start 属性演示 - MDN 示例</title>
<meta name="description" content="盒模型示例：padding（block-start 属性演示）。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">padding-block-start: 20px;</button>
<button class="snippet-btn" data-index="1">padding-block-start: 20px;</button>
<button class="snippet-btn" data-index="2">padding-block-start: 5em;</button>
<button class="snippet-btn" data-index="3">padding-block-start: 5em;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies
a small unregarded yellow sun.
</div>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
padding-block-start: 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
padding-block-start: 20px;
writing-mode: vertical-rl;
}`,
`#example-element {
padding-block-start: 5em;
writing-mode: horizontal-tb;
}`,
`#example-element {
padding-block-start: 5em;
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
padding-block-end
逻辑属性：设置块结束方向的内边距。
padding-block-end 交互演示（MDN）
逻辑属性：设置块结束方向的内边距。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>padding-block-end 属性演示 - MDN 示例</title>
<meta name="description" content="盒模型示例：padding（block-end 属性演示）。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">padding-block-end: 20px;</button>
<button class="snippet-btn" data-index="1">padding-block-end: 20px;</button>
<button class="snippet-btn" data-index="2">padding-block-end: 5em;</button>
<button class="snippet-btn" data-index="3">padding-block-end: 5em;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies
a small unregarded yellow sun.
</div>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
padding-block-end: 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
padding-block-end: 20px;
writing-mode: vertical-rl;
}`,
`#example-element {
padding-block-end: 5em;
writing-mode: horizontal-tb;
}`,
`#example-element {
padding-block-end: 5em;
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
padding-inline
逻辑属性：设置行方向的内边距。
padding-inline 交互演示（MDN）
逻辑属性：设置行方向的内边距。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>padding-inline 属性演示 - MDN 示例</title>
<meta name="description" content="盒模型示例：padding（inline 属性演示）。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">padding-inline: 5% 10%;</button>
<button class="snippet-btn" data-index="1">padding-inline: 15px 40px;</button>
<button class="snippet-btn" data-index="2">padding-inline: 5% 20%;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies
a small unregarded yellow sun.
</div>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
padding-inline: 5% 10%;
writing-mode: horizontal-tb;
}`,
`#example-element {
padding-inline: 15px 40px;
writing-mode: vertical-rl;
}`,
`#example-element {
padding-inline: 5% 20%;
writing-mode: horizontal-tb;
direction: rtl;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
padding-inline-start
逻辑属性：设置行起始方向的内边距。
padding-inline-start 交互演示（MDN）
逻辑属性：设置行起始方向的内边距。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>padding-inline-start 属性演示 - MDN 示例</title>
<meta name="description" content="盒模型示例：padding（inline-start 属性演示）。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">padding-inline-start: 20px;</button>
<button class="snippet-btn" data-index="1">padding-inline-start: 20px;</button>
<button class="snippet-btn" data-index="2">padding-inline-start: 5em;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies
a small unregarded yellow sun.
</div>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
padding-inline-start: 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
padding-inline-start: 20px;
writing-mode: vertical-rl;
}`,
`#example-element {
padding-inline-start: 5em;
writing-mode: horizontal-tb;
direction: rtl;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
padding-inline-end
逻辑属性：设置行结束方向的内边距。
padding-inline-end 交互演示（MDN）
逻辑属性：设置行结束方向的内边距。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>padding-inline-end 属性演示 - MDN 示例</title>
<meta name="description" content="盒模型示例：padding（inline-end 属性演示）。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">padding-inline-end: 20px;</button>
<button class="snippet-btn" data-index="1">padding-inline-end: 20px;</button>
<button class="snippet-btn" data-index="2">padding-inline-end: 5em;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies
a small unregarded yellow sun.
</div>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
padding-inline-end: 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
padding-inline-end: 20px;
writing-mode: vertical-rl;
}`,
`#example-element {
padding-inline-end: 5em;
writing-mode: horizontal-tb;
direction: rtl;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>