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. STM32 总线
			
    AHB,是Advanced High performance Bus的缩写,译作高级高性能总线,这是一种“系统总线”.AHB主要用于高性能模块(如CPU.DMA和DSP等)之间的连接.AHB 系统由主 ...
    
			
    2. 
						
  2. VS2017报错：未提供初始值设定项
			
    今天在使用VS2017写程序时,报错: 出错的代码如下: #include "pch.h" #include <iostream> #include <threa ...
    
			
    3. 
						
  3. thymeleaf常用模板方法收集
			
    判断是不是为空1.th:if="${xxx} != null" th:if="${xxx != null}" 是不是为空字符串 1.th:if="${ ...
    
			
    4. 
						
  4. MySQL简版（一）
			
    第一章 数据库的基本概念 1.1 数据库的英文单词 Database,简称DB. 1.2 什么是数据库? 用于存储和管理数据的仓库. 1.3 数据库的特点 持久化存储数据的.其实数据库就是一个文件系统 ...
    
			
    5. 
						
  5. Java课程作业02
			
    01. 一.设计思想: 第一种使用n!的公式直接计算,利用递归方法求n! 第二种使用递推的公式,利用递归返回求和. 二.程序流程图 三.源代码 import java.util.*;import ja ...
    
			
    6. 
						
  6. css----动画（图片无限放大缩小）
			
    先给大家推荐animate.css库,里面有一些效果很不错的过度样式,不想自己写的也可以直接安装这个库来使用,如果不想安装这个库也可以去https://daneden.github.io/animat ...
    
			
    7. 
						
  7. 【leetcode】581. Shortest Unsorted Continuous Subarray
			
    题目如下: 解题思路:本题我采用的是最简单最直接最粗暴的方法,把排序后的nums数组和原始数组比较即可得到答案. 代码如下: /** * @param {number[]} nums * @retur ...
    
			
    8. 
						
  8. Bugku 杂项 又一张图片，还单纯吗
			
    又一张图片,还单纯吗 下载后,用binwalk打开图片 使用foremost 2.png进行分离 得到图片 关于foremost foremost [-v|-V|-h|-T|-Q|-q|-a|-w-d ...
    
			
    9. 
						
  9. #1126-JSP服务器响应
			
    JSP服务器响应 Response响应对象主要将JSP容器处理后的结果传回到客户端.可以通过response变量设置HTTP的状态和向客户端发送数据,如Cookie.HTTP文件头信息等. 一个典型的 ...
    
			
    10. 
						
  10. Java Interger类，两对整数明明完全一样，为何一个输出true，一个输出false
			
    package text; public class MethodOverload { public static void main(String[] args) { Integer i1=100; ...
    
			
    11.