一、内边距

1、概念

内边距是盒子的边框与内容之间的间隔长度 ;

下图中 , 中心 100 x 100 像素的是内容 , 内容外侧 , 边框内侧 , 就是内边距范围 ;

2、内边距设置语法

内边距设置语法 :

padding-left : 设置左内边距 ;
padding-top : 设置上内边距 ;
padding-right : 设置右内边距 ;
padding-bottom : 设置下内边距 ;

3、内边距设置效果

设置内边距效果 : 为盒子模型设置内边距 Padding 后 ,

在盒子内容与盒子边框中间 , 会产生一个内边距 ,
与此同时盒子模型的尺寸会变大 ;

二、内边距代码示例

1、不设置边距的示例

<!DOCTYPE html>
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>内边距测试</title><base target="_blank"/><style type="text/css">div {width: 200px;height: 200px;/* 设置边框 */border: 1px solid blue;}</style>
</head>
<body><div>内边距测试</div>
</body>
</html>

展示效果 :

使用标尺测量盒子模型的宽高都是 200 像素 ;

宽度 200 像素 :
高度 200 像素 :

2、设置边距的示例

为盒子模型设置左边距和上边距 , 代码为 :

<!DOCTYPE html>
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>内边距测试</title><base target="_blank"/><style type="text/css">div {width: 200px;height: 200px;/* 设置边框 */border: 1px solid blue;/* 设置左边距 */padding-left: 20px;/* 设置上边距 */padding-top: 30px;}</style>
</head>
<body><div>内边距测试</div>
</body>
</html>

展示效果 :

使用标尺测量盒子模型的尺寸为 220 x 230 像素 ;

宽度 220 像素 :
高度 230 像素 :

【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )相关推荐

html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局. 一.css盒子模型概念 CSS盒子模型又称框模型 (Box Model) ,包 ...
详细认识一下CSS盒子模型
定义 CSS把每个元素看成是一个个单独的框,这里就叫它"元素框"吧.而CSS 盒子模型 (Box Model) 可以理解成一种规范,它规定了元素框处理其"最里边的内容区域 ...
简述对css盒子模型的理解_css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
css盒子样式有哪些,css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
第5章-CSS盒子模型
一.盒子相关属性: 盒子模型是实现网页布局的基础,经常会使用内容(content).内边距(padding).边框(border).外边距(margin)等属性. I.内边距与外边距: 1.外边距: ...
CSS盒子模型-小白学习中
CSS盒子模型一.盒子模型的概念一个独立的盒子模型由内容.边框(border).内边距(padding)和外边距(margin)4部分组成. 1.border是设定边框线条,盒子的其他部分是相对b ...
Web前端基础知识：CSS盒子模型、绝对定位和相对定位
一:CSS盒子模型 CSS盒子模型概念:CSS盒子模型包含了内容(content).内边距(padding).边框(border).外边距(margin).宽度(width).高度(height)几个 ...

【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )

文章目录