开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>开创者教程(kaicz.com)</title> <style> .demo-box { height: 100px; background: #ff6347; color: white; text-align: center; line-height: 100px; margin: 10px 20px 15px; /* 上10px，左右20px，下15px */ border: 1px solid #333; /* 添加边框便于观察margin效果 */ } .container { background: #f0f0f0; border: 1px dashed #999; } </style> </head> <body> <h1>外边距 margin 属性</h1> <div class="container"> <div class="demo-box">margin: 10px;</div> </div> <p>这个橙色盒子的上10px，左右20px，下15px的外边距</p> <p>注意观察橙色盒子与灰色容器之间的间距，这就是margin的效果。</p> </body> </html>
运行结果：
