批改状态:合格
老师批语:好认真, 有图有真相, 不错的
下面这张图片描述了盒子模型,最外面是盒子的外边距 margin ,外边距内部分别是边框 border 以及边框内的内边距 padding:

下面分享一个简单的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
height:100px;
width:100px;
border:10px solid red;
padding:10px;
margin:10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
这里是盒子内的实际内容。有 10px 内间距,10px 外间距、10px 红色边框。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号