padding内边距

margin外边距

border边框

内容与(上下左右)边框距离padding-(top,bottom,left,right)

盒子间距margin

边框border

盒模型内的内容可以是文字，图片，标签等等。视频应该也可以,盒子与盒子内的内容之间的距离用 padding 表示,两个盒模型之间的距离用 margin 表示,盒模型的边框用 border 表示.内填充，外边距，边框都有四个方向top,left right,buttom.盒
块级元素标签具备盒子模型的特点.css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=
左边界(margin)+左边框(border)+左填充(padding)+内容宽度(width)+右填充(padding)+右边框(border)+右边界(padding)

内边-padding-

外边-border-

外边-margin

盒模型内的内容可以是文字，图片，标签等等。视频应该也可以,盒子与盒子内的内容之间的距离用 padding 表示,两个盒模型之间的距离用 margin 表示,盒模型的边框用 border 表示.内填充，外边距，边框都有四个方向top,left right,buttom.盒
块级元素标签具备盒子模型的特点.css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=
左边界(margin)+左边框(border)+左填充(padding)+内容宽度(width)+右填充(padding)+右边框(border)+右边界(padding)

,盒子与盒子内的内容之间的距离用 padding 表示,两个盒模型之间的距离用 margin 表示,盒模型的边框用 border 表示.内填充，外边距，边框都有四个方向top,left right,buttom.盒

块级元素标签具备盒子模型的特点.css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=
左边界(margin)+左边框(border)+左填充(padding)+内容宽度(width)+右填充(padding)+右边框(border)+右边界(padding)

块级标签都具备盒子模型

盒子模型：

padding: 内填充，内容到边框的距离，有方向之分

margin: 容器到容器间的距离

border：容器的边框

盒子模型：
月饼盒：页面元素（例：<div>）
月饼（内容）：文字、图片、另一个标签元素
月饼盒到月饼的距离：内填充（padding）
两个月饼盒之间的距离：外边距（margin）
盒子的边框（border）
块级标签都具备盒子模型特征。如：<div><ul><ol><p><h><table>

1、元素实际高度（盒子的高度）是：自己高度+上下内填充+上下边界+上下边框
2、同理，元素实际宽度（盒子的宽度）是：自己宽度+左右内填充+左右边界+左右边框

内填充、外边距和边框都有4个方向 top bottom left right

<div> <p> <table> <h> <ul> 这些块级标签都具备盒子模型的特征

盒子模型内可以是：文字，图片，以及另外的标签元素

盒子与盒子之间叫外边距 margin 表示

盒子与盒子内容之间叫内填充 padding 来表示

盒子的边框 border 来表示

注意：

1. 盒子模型的内填充，外边距及边框都是4个方向

2. 宽度，高度都是：盒子模型的内容＋内填充＋边框＝实际盒子模型的宽度及高度

3. 所学的<div>,<p>，<ul>,<ol>,<h1>...<h6>,<table>...等块级标签，都具备盒子模型的特征
   

盒子的边框叫做Border，所有块级元素都具有盒子的特征。内填充，外边距和边框都有四个方向，当把padding-top变小后，则月饼会向上靠拢。月饼相当于内填充，月饼为300px，实际高度为300+内填充加边框。

盒模型

内填充：padding

外边距：margin

边框：border

都有四个方向

块状元素具备盒子模型的特征

好豪豪豪豪

盒子模型的原理

• 内容（文字/图片/标签元素）-content

• 内边距-padding

• 外边距-margin

• 边框-border
  

*内边距，外边距和边框都有4个方向
 - padding-top
 - padding-right
 - padding-bottom
 - padding-left

内容的实际高度和宽度=自己+上下的内边距，外边距和边框

<div> 、<ul>、<ol>、<p>、<h>、<table>块级标签，都具有模型的特征

内边距：内容与边框的距离  padding 有top/bottom   left/right四个方向

外边距：盒子与盒子之间的距离  margin

盒子的边框  border

块标签都具有盒子模型的特征

padding是表示内边距，margin表示外边距，border表示边框

盒子模型：content（内容），内边距（padding），边框（border），外边距（margin）

content 就是那瓶红酒；

padding 就是那层包裹瓶装的充气袋或泡沫；

border 可以理解酒箱子，设置了border就是有酒箱子，没设置border就是没有酒箱子；

margin 就是你的快件包裹和其它快件的摆放位置；

盒子模型视频讲解

四个方向.

padding 内边框
margin 外边框

块级元素都有盒模型的特点

可以设置边距

长宽等

盒子模型:块状标签都具备盒子模型特征

padding---内填充

外边距---margin

border---边框

padding-top/padding-bottom/padding-left/padding-right内填充上下左右

一个盒子模型的

总高度等于内部元素的height加margin-top加padding-top加padding-bottom加margin-bottom加border-top加border-bottom

总宽度等于内部元素的width加margin-left加padding-left加padding-right加margin-right加border-left加border-right

使用padding为盒子设置内边距（内填充）

元素内容与边框之间是可以设置距离的，为内填充或内边距。分上、右、下、左（顺时针）,如

div{

    padding:20px 10px 15px 30px;

}分开写为：

div{

    padding-top:20px;

    padding-right:10px;

    padding-bottom:15px;

    padding-left:30px;

}

如上下相同，左右相同，则可简写：

div{

    padding:10px 20px;/*上下10px，左右20px*/

}

如上右下左都相同，则可简写：

div{

    padding:10px;/*上右下左都是10px*/

}

使用margin为盒子设置外边距（边界）：

元素与其他元素之间的距离可以使用外边距（边界）margin来设置，也分为上、右、下、左。（顺时针）

如：

div{

    margin：10px 20px 15px 30px;/*上右下左顺序*/

}也可分开来写

div{

    margin-top:10px;

    margin-right:20px;

    margin-bottom:15px;

    margin-left:30px;

}

如上下相同，左右相同，则可简写：

div{

    margin:10px 20px;/*上下10px，左右20px*/

}

如上右下左都相同，则可简写：

div{

    margin:10px;/*上右下左都是10px*/

}

总结padding和margin的区别：

padding在边框border里，margin在边框border外

<div> 、<ul>、<ol>、<p>、<h>、<table>块级标签，都具有模型的特征。

盒子模型分四块：margin(外边距)，border（边框），padding（内边距），content（内容）

将块级元素理解为一个盒子，他的内容就是内部的各种元素（文本、图片、其他标签等）。盒子的样式通过内填充（padding）、边框（border）、外边距（margin）设置。

注意：内填充（padding）、边框（border）、外边距（margin）都有四个方向。

padding、border、margin样式设定的顺序：top、right、bottom、left。如padding-top:20px; border-right:10px

如果上下一致、左右一致、则可以写成paddind:20px 10px;

盒子模型的内填充：padding

盒子模型分四块：margin(外边距)，border（边框），padding（内边距），content（内容）

块级标签有盒子模型的特性

盒子模型分四块：margin(外边距)，border（边框），padding（内边距），content（内容）