开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
SVN 教程
SEO 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>开创者教程(kaicz.com)</title> <style> .box { width: 350px; height: 100px; background-color: #ff6347; color: white; padding: 20px; 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">默认情况下（box-sizing: content-box）</div> </div> <p>浏览器默认使用标准盒模型时：</p> <p>此元素总宽度 = 内容宽度(350px) + padding(20px*2) + border(2px×2) = 394px</p> <p>此元素总高度 = 内容高度(100px) + padding(20px*2) + border(2px×2) = 144px</p> </body> </html>
运行结果：
