css盒子模型大详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
span,a,b,strong
{
display: inline-block;
width: 100px;
height:100px;
border: 6px solid red;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<span>我是span</span>
<a href="#">我是超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>
</body>
</html>
在这里插入图片描述
内容区域:高度和宽度。 内边距：填充物。 边框：装东西的盒子 外边距：盒子与盒子之间的距离。 核心：外边距是标签与标签之间的距离，就算是一个盒子嵌套一个盒子也可以有外边距的。比如body嵌套div也一样。
盒子模型的宽度与高度： 内容与元素与元素空间又有什么区别呢？ 内容只是宽度与高度而已。 元素是只包括边框 内边距 内容。margin不算在其中。 元素的空间：是外边距+边框+padding+内容把。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/09/02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
