前端 CSS 盒子模型 padding 内边距 属性
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 内边距 属性的更多相关文章
- 前端 CSS 盒子模型
盒模型的概念 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
- [Web 前端] CSS 盒子模型，绝对定位和相对定位
cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...
- 前端 CSS 盒子模型 目录
CSS盒子模型介绍 padding border属性
- css盒子模型 padding
注意: 行内元素的内边距的top和bottom是不起作用的,想让他起作用要让他变成块元素加:display:bloock 注意: 如果元素设置了背景,那么背景会填充到内容区+内边距区 利用paddin ...
- css盒子模型中的border属性
认识border属性 我们可以通过boder属性来为元素设置边框:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线.CSS border 属性允许你规定元素边框的样式.宽度和 ...
- 前端 CSS 盒子模型 边框 border属性
边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...
- 理解CSS盒子模型
概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...
- （5）css盒子模型（基础上）
CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- Codeforces Round #427 (Div. 2) - A
题目链接:http://codeforces.com/contest/835/problem/A 题意:两个人给网站发信息,现在给出信息的长度n,两个人的延迟和打字速度(一个字符),问网站先收到哪个人 ...
- socket tcp clinet最简单测试程序
// testsocketclient.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <winsock2.h> ...
- 七、ARM 指令集
7.1 数据处理指令 7.1.1 数据传送类 MOV 类指令:核内寄存器间的数据传送 加载和存储指令(L/S):核内寄存器与挂在存储器总线上器件的数据传送 注意: 核内寄存器就是 R0-R15 外设寄 ...
- java调用shell脚本小demo
复制指定文件cpp.sh: [root@localhost soft]# vim cpp.sh#!/bin/bash name="$1"\cp /home/soft/test/${ ...
- Azure IoT 技术研究系列3
上篇博文中我们将模拟设备注册到Azure IoT Hub中:我们得到了设备的唯一标识. Azure IoT 技术研究系列2-设备注册到Azure IoT Hub 本文中我们继续深入研究,设备到云.云到 ...
- CSS居中完全指南——构建CSS居中决策树
CSS居中完全指南--构建CSS居中决策树 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到CSS居中问题时有章可循. 参考Centering in CSS: A Com ...
- 与Swing的初见
---------------------------参考菜鸟教程的swing课程学习-------------------- Swing 是一个为Java设计的GUI工具包. Swing是JAVA基 ...
- Windows Server2008R2蓝屏，分析dmp文件
使用Windbp PreView打开dmp文件后,在命令栏输入如下命令: !analyze -v 解析结果中蓝色字体为错误原因分析
- python 布尔判断并做需要的返回值
- linux运维、架构之路-linux目录结构
1.linux重要目录 重要目录 说明 /etc 存放系统配置文件.服务启动命令的目录 /root 超级管理员的家目录 /sbin和usr/sbin 超级用户命令的目录 /boot 系统引导程序所在的 ...