理解HTML5盒模型：padding, border与margin-CSDN博客

本文链接：https://blog.csdn.net/CSDN_GMC/article/details/104218123

本文详细介绍了HTML5盒模型的组成部分，包括标准盒模型、padding内间距、border元素边框和margin外间距。通过理解这些概念，可以更好地控制元素的布局和调整子元素的位置。此外，文章还探讨了边框的宽度、样式和颜色，以及边框圆角的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5布局阶段--盒模型

一. 标准盒模型
二. padding 内间距
三. border 元素的边框
四. margin 外间距

一. 标准盒模型

默认情况下盒子的边框是无，背景色是透明的，所以在默认情况下看不到盒子
盒子由 margin , border , padding , content （盒子中的内容）四部分组成。

元素（块元素或者内联块）的实际大小 = 内容 + padding + border
width/height 只是去设置盒模型中的内容区域
之前所学习的对齐方式： text-align，line-height，vertical-align 全部都是在内容区域中的对齐
而盒模型的属性是针对整个 内容区域 来布局调整
其中 padding 会增加元素的实际占位大小，padding用来调整自身子元素的位置

二. padding 内间距

padding：内间距，用于控制内容与边框的距离
一个值：上下左右
两个值：上下，左右
三个值：上，左右，下
四个值：上，右，下，左
专门设定某一方向的 padding
padding-top：上内边距
padding-bottom：下内边距
padding-left：左内边距
padding-right：右内边距

<!DOCTYPE html>
<html>
<head>
	<title>padding</title>
	<style type="text/css">
	
	  .box{
	      width: 200px;
	      height: 200px;
	      border: 2px solid black;

	      /*padding-left: 100px;
	      padding-top: 100px;*/

	      /*padding： 内间距*/
	      /*
	      一个值： 上下左右
	      两个值： 上下，左右
	      三个值： 上，左右，下
	      四个值： 上，右，下，左
	      */
	      padding: 50px 20px 5px 70px;
	     }
	  .bt{
	  	width: 100px;
	  	height: 100px;
	  	background-color: red;
	   }
	</style>
</head>
<body>   
    <div class="box">
        <div class="bt"></div>
    </div>

</body>
</html>

在这里插入图片描述

三. border 元素的边框

边框属性
边框粗细 border-width：数值+px;(单位不能少，数值任意，但不能为负)
边框样式 border-style（具体见下面）
边框颜色 border-color
复合属性 border：1px solid red;
设置边框样式（border-style）
none 无
hidden 隐藏
dotted 点线
dashed 虚线
solid 实线
double 双线
groove 凹槽
ridge 凸脊
inset 内陷
outset 外凹
border-radius: 边框切圆，最大值为50%
一个值：左上，右上，右下，左下（顺时针）
两个值：左上右下，右上左下
三个值：左上，右上左下，右下
四个值：左上，右上，右下，左下

<!DOCTYPE html>
<html>
<head>
	<title>border</title>

	<style type="text/css">
     
     /*border: 元素的边框*/
     .box{
     	width: 150px;
     	height: 50px;
     	border: 20px solid black;


     	/*边框切圆   最大值为50%*/
     	/*一个值： 左上，右上，右下，左下（顺时针）
     	  两个值：左上右下，   右上左下
     	  三个值：左上，右上左下， 右下
     	  四个值： 左上，右上，右下，左下*/
     	border-radius: 50%;
        border-top-color: yellow;
        border-right: red;
        border-left: green ;
        border-bottom-color: blue;
     	padding: 100px 0px 100px 100px;
     }
     .bt{
     	width: 50px;
     	height: 50px;
     	background-color: black;
     	border-radius: 50%;
     }
     .bl{
     	width: 20px;
     	height: 20px;
     	background-color: yellow;
     	border-radius: 5%;
     }

	</style>
</head>
<body>

    <div class="box">
        <div class="bt">
        <div class="bl">m</div>        	
        </div>    	
    </div>

</body>
</html>

在这里插入图片描述

四. margin 外间距

作用：调整元素自身和其他元素之间的距离
设置外边距综合写法(margin)
一个值：上下左右；margin:10px;
两个值：前者表示上下值，后者表示左右的值；margin:10px 20px;
三个值：表示上、左右、下；margin:10px 20px 5px;
四个值：表示上、右、下、左；margin:10px 20px 30px 5px;
（顺时针记忆）

注意点：
1.左右间距中，外间距是相加的和
2.上下间距中，相加的和
备注：会出现上下间距合并，取最大值。