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. macos升级Nodejs和Npm到最新版
			
    第一步,先查看本机node.js版本: node -v 第二步,清除node.js的cache: sudo npm cache clean -f 第三步,安装 n 工具,这个工具是专门用来管理node ...
    
			
    2. 
						
  2. JVM 常量池、运行时常量池、字符串常量池
			
    常量池: 即class文件常量池,是class文件的一部分,用于保存编译时确定的数据. 保存的内容如下图: D:\java\test\out\production\test>javap -ver ...
    
			
    3. 
						
  3. Set 的合集 并集    差集
			
    合集 ,,,,,,]; ,,]; function union() { //先将数组去重 let s1 = new Set(arr1); let s2 = new Set(arr2); //[...s ...
    
			
    4. 
						
  4. NOIP2019(CSP2019) 游记
			
    NOIP2019(CSP2019) 游记 近一年的似乎也就是感觉比别的学校的同学水平低的不止一点,到现在也没有搞清楚大概应该怎么科学有效的练习,并不会思考"为什么想不到"和&quo ...
    
			
    5. 
						
  5. 【leetcode】1155. Number of Dice Rolls With Target Sum
			
    题目如下: You have d dice, and each die has f faces numbered 1, 2, ..., f. Return the number of possible ...
    
			
    6. 
						
  6. 微信小程序-坑1-await-async
			
    VM45:1 thirdScriptError sdk uncaught third Error regeneratorRuntime is not defined ReferenceError: r ...
    
			
    7. 
						
  7. 7，HashMap
			
    一,HashMap简介 1,HashMap 是一个散列表,它存储的内容是键值对(key-value)映射. 2,HashMap 继承于AbstractMap,实现了Map.Cloneable.java ...
    
			
    8. 
						
  8. 运输计划noip
			
    靠!这道题TM搞了我好几天,真是烦死人!!!早上打了一个倍增的TM只有95分QAQ... 然后一气之下开始不断卡常,各种玄学优化,可是就是T..TAT.. 可恶!晚上我就直接打了个tarjan,还好跑 ...
    
			
    9. 
						
  9. git 部署服务
			
    git 知识 服务器知识 1.在本地完成代码的编写, 然后通过 git 管理版本. 在编码完成后 git push 到 git 云端(github 或者 码云 及其他). 2.在服务器端安装 git  ...
    
			
    10. 
						
  10. 【转】vux （scroller）上拉刷新、下拉加载更多
			
    1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性 <scroller :lockX="true" height="-170" :p ...
    
			
    11.