开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
SVN 教程
SEO 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Padding示例</title> <style> .box { width: 200px; height: 100px; background: #ff6347; color: white; padding: 10px 20px 15px 5px; /* 上10px，右20px，下15px，左5px */ border: 2px solid #333; } .content { background: rgba(255,255,255,0.2); height: 100%; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <h1>CSS padding属性示例</h1> <div class="box"> <div class="content">padding: 10px 20px 15px 5px;</div> </div> <p>橙色区域与白色内容之间的空间就是padding的效果。</p> <p>此元素总宽度 = 内容宽度(200px) + padding(20px+5px) + border(2px×2) = 229px</p> <p>此元素总高度 = 内容高度(100px) + padding(10px+15px) + border(2px×2) = 129px</p> </body> </html>
运行结果：
