一、内边距

1、定义：内边距：盒子中内容与边框之间的距离

2、用法：

(1) 上内边距 padding-top: 20px;

(2) 左内边距 padding-left: 15px;

(3) 下内边距 padding-bottom: 25px;

(4) 右内边距 padding-right: 10px;

(5) 属性值个数不同

① 四个属性值 :上、右、下、左 padding: 50px 40px 30px 10px;

② 三个属性值：上、左右、下 padding: 50px 40px 30px;

③ 两个属性值：上下、左右 padding: 50px 20px;

④ 一个属性值：上下左右 padding: 50px;

补充：内边距的设置会影响盒子的大小

背景颜色会延申到内边距

一个盒子的可见框大小，由内容区，内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。

二、外边距

1、含义：盒子的边框与其他元素或者浏览器边缘之间的距离

外边距不会影响盒子可见框的大小 ,但是外边距会影响盒子的位置

2、使用：

① 上外边距 margin-top: 100px;

② 左外边距 margin-left: 80px;

③ 下外边距 margin-bottom: 50px;

④ 右外边距 margin-right: 200px;

3、设置方法

(1) 四个属性值：上右下左 margin: 90px 70px 50px 20px;

(2) 三个值：上、左右、下margin: 90px 70px 20px;

(3) 两个值：上下、左右margin: 90px 50px;

(4) 一个值：上下左右 margin: 50px;

补充：

外边距可以指定一个为负值

如果外边距设置的是负值，则会向反方向移动

外边距统一可以使用简写属性 margin，可以同时设置四个方向的外边距，规则和padding一样

css盒子模型的外边距和内边距相关推荐

CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型外边距属性设置块级盒子水平居中文字居中以及盒子居中插入图片和背景图片的区别清除元素的默认内外边距外边距合并(只存在垂 ...
HTML盒子模型制作个人名片,网页设计基础 CSS盒子模型第4章 CSS盒子模型_教学设计.doc...
博学谷--让IT教学更简单,让IT学习更有效 PAGE 12 PAGE 1 <HTML+CSS+JavaScript网页制作案例教程> 教学设计课程名称: HTML+CSS+JavaSc ...
盒子模型（插入图片，外边距，内边距）
盒子模型(Box Model) 所谓盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器盒子模型有元素的内容.边框(border).内边距(padding).和外边 ...
html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
盒子模型之外边距margin(HTML、CSS)
盒子模型之外边距margin(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta ...
【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
文章目录一.内边距 1.概念 2.内边距设置语法 3.内边距设置效果二.内边距代码示例 1.不设置边距的示例 2.设置边距的示例一.内边距 1.概念内边距是盒子的边框与内容之间的 ...
【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录一.实现效果二.基本 HTML 结构三.设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四.设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五.设置列表盒子样式 ( ...
CSS 盒子模型（转）
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和外边距(marg ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...

css盒子模型的外边距和内边距

一、内边距

二、外边距

css盒子模型的外边距和内边距相关推荐

最新文章

热门文章