10-padding(内边距)
padding
padding:就是内边距的意思,它是边框到内容之间的距离
另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域
padding的设置
padding有四个方向,分别描述4个方向的padding。
描述的方法有两种
1、写小属性,分别设置不同方向的padding
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
2、写综合属性,用空格隔开

/*上 右 下 左*/
padding: 20px 30px 40px 50px ; /*上 左右 下*/
padding: 20px 30px 40px; /* 上下 左右*/
padding: 20px 30px; /*上下左右*/
padding: 20px;

一些标签默认有padding
比如ul标签,有默认的padding-left值。
那么我们一般在做站的时候,是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。
我们现在初学可以使用通配符选择器
*{
padding:0;
margin:0;
}
But,这种方法效率不高。
所以我们要使用并集选择器来选中页面中应有的标签(不同背,因为有人已经给咱们写好了这些清除默认的样式表,reset.css)
https://meyerweb.com/eric/tools/css/reset/
10-padding(内边距)的更多相关文章
- android 国际化 横屏(land) 竖屏(port)margin外边距和padding内边距
android 国际化 横屏(land) 竖屏(port) 边距又分为内边距和外边距,即margin和padding.
- 前端 CSS 盒子模型 padding 内边距 属性
padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容区域的颜色一样.也就是说background-color这个属性将填充所有的bor ...
- padding(内边距)、margin(外边距)、border(边框)
元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 mar ...
- padding内边距
android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/ac ...
- padding和margin——内边距和外边距
一.padding——内边距(内填充) 1.1.padding 简写属性在一个声明中设置所有填充属性.该属性可以有1到4个值. <style> div.outer{ width: 400p ...
- CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系
一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...
- CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
- 学习微信小程序之css9内边距
padding内边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- css 外边距,内边距的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS -- 盒子模型之边框、内边距、外边距
一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...
随机推荐
- echarts柱形图x轴显示不全或者每隔一个不显示的问题
问题原因可能:x轴数据间隔太小: 问题解决: 1.调整间隔属性 xAxis: { type: 'category', //坐标轴斜着显示 axisLabel: { interval:0, rotate ...
- BCHABC/BCHSV的矛盾所在
BCHABC: 将BCH以后发展智能合约: 消息方面: 吴忌寒:BCH分叉不可避免 未来可能继续分叉 近日,吴忌寒在北大光华管理学院的区块链培训课程上发表演讲表示,在这种言论自由地环境下,我认为分裂就 ...
- Git 安装和使用教程(更加详细)
转载至:https://www.cnblogs.com/smuxiaolei/p/7484678.html#undefined Git 安装和使用教程 git 提交 全部文件 git add . g ...
- c#程序设计原则
单一职责 开闭原则:对扩展开放,对修改封闭. 方法 的职责,一个方法做的事越多,造成问题的可能性会增加. 解决的方法1:就是分拆2:写单独类
- c#异步等待
1:一直等待 2方法 现实等待 3:方法 带返回值得 begin -endinvoke 4: func 带返回值
- kubadm创建k8s v1.10集群
kubadm创建k8s集群 1:服务器信息以及节点介绍 主机名 ip 备注 k8s-master 192.168.0.104 master etcd keepalived k8s-client1 19 ...
- ES6 Generator的应用场景
一.基础知识 API文档 ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发布/订阅 Promise 对象 Generator 函数将 JavaScript 异步编程带入了一个 ...
- andorid 帧布局
framelayout.xml帧布局 <?xml version="1.0" encoding="utf-8"?> <FrameLayout ...
- epoll机制:epoll_create、epoll_ctl、epoll_wait、close
在Linux的网络编程中,很长的时间都在使用select来做事件触发.在linux新的内核中,有了一种替换它的机制,就是epoll.相比于select,epoll最大的好处在于它不会随着监听fd数 ...
- $ each() 小结
each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...