padding：就是内边距的意思，它是边框到内容之间的距离

另外padding的区域是有背景颜色的。并且背景颜色和内容区域的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        .box{

            width: 300px;

            height: 300px;

        }

    </style>

</head>

<body>

    <div class="box">

        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

        内容内容内容内容内容

    </div>

</body>

</html>

加上padding属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        .box{

            width: 300px;

            height: 300px;

            padding: 20px;

        }

    </style>

</head>

<body>

    <div class="box">

        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

        内容内容内容内容内容

    </div>

</body>

</html>

加上background-coloor属性 背景颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        .box{

            width: 300px;

            height: 300px;

            padding: 20px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="box">

        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

        内容内容内容内容内容

    </div>

</body>

</html>

padding有四个方向.所以说我们能分别描述4个方向的padding
方法有两种：1.写小属性 2.写综合属性 用空格隔开

1.小属性，分别设置不同方向的padding
涉及单个方向padding使用
padding-top: 30px;

padding-right: 30px;

padding-bottom: 30px;

padding-left: 30px;

2.写综合属性 用空格隔开 推荐使用

(1) 上 右 下 左

/*上 右 下 左*/

padding: 20px 30px 40px 50px ;
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        .box{

            width: 300px;

            height: 300px;

            padding: 20px 30px 40px 50px;

            border: 10px solid red;

        }

    </style>

</head>

<body>

    <div class="box">

        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

        内容内容内容内容内容

    </div>

</body>

</html>

(2) 上 左右 下

/*上 左右  下*/

padding: 20px 30px 40px;
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        .box{

            width: 300px;

            height: 300px;

            /* 上 左右 下 */

            padding: 20px 30px 40px ;

            border: 10px solid red;

        }

    </style>

</head>

<body>

    <div class="box">

        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

        内容内容内容内容内容

    </div>

</body>

</html>

 (3) 上下 左右
/* 上下 左右*/

padding: 20px 30px;




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        .box{

            width: 300px;

            height: 300px;

            /* 上下 左右 */

            padding: 20px 30px;

            border: 10px solid red;

        }

    </style>

</head>

<body>

    <div class="box">

        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

        内容内容内容内容内容

    </div>

</body>

</html>






(4) 上下左右




/*上下左右*/

padding: 20px;






<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        .box{

            width: 300px;

            height: 300px;

            /* 上下左右 */

            padding: 20px;

            border: 10px solid red;

        }

    </style>

</head>

<body>

    <div class="box">

        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

        内容内容内容内容内容

    </div>

</body>

</html>




												


											
前端 CSS 盒子模型 padding 内边距 属性的更多相关文章
	

    
								
  1. 前端 CSS 盒子模型
		
    盒模型的概念 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
    
		
    2. 
						
  2. [Web 前端]   CSS 盒子模型，绝对定位和相对定位
		
    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...
    
		
    3. 
						
  3. 前端 CSS 盒子模型 目录
		
    CSS盒子模型介绍 padding border属性
    
		
    4. 
						
  4. css盒子模型 padding
		
    注意: 行内元素的内边距的top和bottom是不起作用的,想让他起作用要让他变成块元素加:display:bloock 注意: 如果元素设置了背景,那么背景会填充到内容区+内边距区 利用paddin ...
    
		
    5. 
						
  5. css盒子模型中的border属性
		
        认识border属性 我们可以通过boder属性来为元素设置边框:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线.CSS border 属性允许你规定元素边框的样式.宽度和 ...
    
		
    6. 
						
  6. 前端 CSS 盒子模型 边框 border属性
		
    边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...
    
		
    7. 
						
  7. 理解CSS盒子模型
		
    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...
    
		
    8. 
						
  8. （5）css盒子模型（基础上）
		
    CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin ...
    
		
    9. 
						
  9. {前端CSS} 语法   Css的几种引入方式  css选择器 选择器的优先级   CSS属性相关      背景属性      边框   CSS盒子模型     清除浮动     overflow溢出属性　　定位（position）z-index
		
    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 格式化你的git message
			
    https://github.com/angular/angular.js/blob/f3377da6a748007c11fde090890ee58fae4cefa5/CONTRIBUTING.md# ...
    
			
    2. 
						
  2. snmpwalk工具使用
			
     snmpwalk是SNMP的一个工具,它使用SNMP的GETNEXT请求查询指定OID(SNMP协议中的对象标识)入口的所有OID树信息,并显示给用户. 在linux下使用snmpwalk工具,我们 ...
    
			
    3. 
						
  3. Centos7.X新安装linux系统基础配置
			
    普通Linux分区方式: /根分区 Linux系统必须要有的,相当于 Windows的C盘,系统程序相关的. /boot分区 存放内核相关程序 是可选的 5 6给200M,7给256M(工作中1-2G ...
    
			
    4. 
						
  4. 用电脑Python控制Arduino
			
    python指令: import serial #导入串口通讯库 import time ser=serial.Serial("com4",9600,timeout=1) demo ...
    
			
    5. 
						
  5. Vuejs使用scoped(私有) style为v-html中标签添加CSS样式
			
    最近使用Vue框架的时候遇到一个问题,就是后台把数据写好了,而且写好的数据的某些内容是html格式的,使用Vue框架的v-html虽然可以很简单的就把数据转换成html的标签渲染在页面上,但是有些样式 ...
    
			
    6. 
						
  6. js基础复习~Array对象
			
    Array对象 lenght 获取到数组的长度 concat() 方法用于合并两个或多个数组.此方法不会更改两大有数组,而是返回一个新的数组 let arr1 = ["a",&qu ...
    
			
    7. 
						
  7. PHP培训教程 PHP的运算符
			
    PHP中有丰富的运算符集,它们中大部分直接来自于C语言.按照不同功能区分,兄弟连PHP培训 运算符可以分为:算术运算符.字符串运算符.赋值运算符.位运算符.条件运算符,以及逻辑运算符等.当各种运算符在 ...
    
			
    8. 
						
  8. Laya 爆改Laya IDE和Laya引擎使其支持2D粒子爆发模式
			
    Laya 爆改Laya IDE和Laya引擎使其支持2D粒子爆发模式 @author ixenos 2019-11-01 19:47:26 1. 修改IDE的功能需要深入到/resources/app ...
    
			
    9. 
						
  9. 《Vue前端开发手册》
			
    序言 为了统一前端的技术栈问题,技术开发二部规定开发技术必须以Vue为主. 为了更好的规范公司的前端框架,现以我前端架构师为主,编写以下开发规范,如有不当的地方,欢迎批评教育并慢慢改善该开发文档,谢谢 ...
    
			
    10. 
						
  10. 阿里云服务器+ubantu+nodejs 服务器基本配置流程
			
    所有步骤在MAC 电脑环境下操作 一.配置环境 1.连接到远程服务器 1.购买阿里云ECS服务器,我选用的 ubantu 14.0.4 (64位),购买的时候输入的密码记录下来,没有设置的话可以随后在 ...
    
			
    11.