【CSS】边距和填充基础｜如何使用 m-0, p-10, m-20, p-5
本文将通过实际示例说明如何使用 m-0, p-10, m-20, 和 p-5 来调整边距和填充。通过这些属性，您可以轻松控制元素的外部和内部空间。
🔹 示例代码
<div class="m-0">
这个元素的边距为 0。
</div>
<div class="p-10">
这个元素的填充为 10px。
</div>
<div class="m-20">
这个元素的边距为 20px。
</div>
<div class="p-5">
这个元素的填充为 5px。
</div>
<style>
.m-0 {
margin: 0;
background-color: rgba(255, 0, 0, 0.2); /* 红色 */
}
.p-10 {
padding: 10px;
background-color: rgba(0, 255, 0, 0.2); /* 绿色 */
}
.m-20 {
margin: 20px;
background-color: rgba(0, 0, 255, 0.2); /* 蓝色 */
}
.p-5 {
padding: 5px;
background-color: rgba(255, 255, 0, 0.2); /* 黄色 */
}
</style>
💻 完整代码（复制并粘贴以使用）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>边距和填充</title>
<style>
.m-0 {
margin: 0;
background-color: rgba(255, 0, 0, 0.2); /* 红色 */
}
.p-10 {
padding: 10px;
background-color: rgba(0, 255, 0, 0.2); /* 绿色 */
}
.m-20 {
margin: 20px;
background-color: rgba(0, 0, 255, 0.2); /* 蓝色 */
}
.p-5 {
padding: 5px;
background-color: rgba(255, 255, 0, 0.2); /* 黄色 */
}
</style>
</head>
<body>
<div class="m-0">这个元素的边距为 0</div>
<div class="p-10">这个元素的填充为 10px</div>
<div class="m-20">这个元素的边距为 20px</div>
<div class="p-5">这个元素的填充为 5px</div>
</body>
</html>
🧩 应用和使用方法
margin: 0; 是最简单的方式来消除元素的外边距 padding: 10px; 确保元素的内部空间均匀和适当的尺寸。
📱 与响应式设计结合使用
在响应式设计中，您可以使用 m-0 和 p-10 来根据屏幕尺寸调整边距和填充。例如，您可以使用 m-0 来去除不必要的边距，并为移动设备调整填充。
这些类在对齐表单字段或按钮时特别有用。
已复制!