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