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. mac+react-native环境搭建
			
    主要参考 https://reactnative.cn/docs/getting-started.html react-native中文网 IOS版 1.Node v10以上.Watchman 和 R ...
    
			
    2. 
						
  2. php内置函数分析array_diff()
			
    PHP_FUNCTION(array_diff) { zval *args; int argc, i; uint32_t num; HashTable exclude; zval *value; ze ...
    
			
    3. 
						
  3. 使用QT创建系统托盘
			
    使用QT来创建一个系统托盘,事实上是一件很简单的事.为什么这么说?一是因为QT文档给出了比较详细的例子,二是QT的结构比较优雅,设计风格统一.但是在动手之前,我们要从哪里下手?虽然QT文档给出了一个比 ...
    
			
    4. 
						
  4. Store generated project files externally
			
    最近项目要从.net转java了,之前java语言就就用过,本着熟悉回顾的想法,决定自己用maven搭建一个基础的ssm框架,一些搭建完毕,程序也能正常运行了.最后对比了别人搭建好的源码,发现他们im ...
    
			
    5. 
						
  5. django之表单类
			
    一:表单类 一般我们在html中自己写的表单类似于下面的样子 <!DOCTYPE html> <html lang="en"> <head> & ...
    
			
    6. 
						
  6. 【leetcode】1161. Maximum Level Sum of a Binary Tree
			
    题目如下: Given the root of a binary tree, the level of its root is 1, the level of its children is 2, a ...
    
			
    7. 
						
  7. 【leetcode】1143. Longest Common Subsequence
			
    题目如下: Given two strings text1 and text2, return the length of their longest common subsequence. A su ...
    
			
    8. 
						
  8. List中的Map
			
    List中的Map import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.u ...
    
			
    9. 
						
  9. redis过期策略设置
			
    中6中过期策略的具体方式. redis 中的默认的过期策略是volatile-lru .设置方式 可以通过命令直接设置 config set maxmemory-policy volatile-lru ...
    
			
    10. 
						
  10. instanceof用来判断啥？
			
    java中的instanceof运算符是用来在运行时指出对象是否是特定类的一个实例.instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或者是它的子类的一个实例.
    
			
    11.