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(内边距)的更多相关文章

  1. android 国际化 横屏(land) 竖屏(port)margin外边距和padding内边距

    android 国际化 横屏(land) 竖屏(port) 边距又分为内边距和外边距,即margin和padding.

  2. 前端 CSS 盒子模型 padding 内边距 属性

    padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容区域的颜色一样.也就是说background-color这个属性将填充所有的bor ...

  3. padding(内边距)、margin(外边距)、border(边框)

    元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 mar ...

  4. padding内边距

    android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/ac ...

  5. padding和margin——内边距和外边距

    一.padding——内边距(内填充) 1.1.padding 简写属性在一个声明中设置所有填充属性.该属性可以有1到4个值. <style> div.outer{ width: 400p ...

  6. CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系

    一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...

  7. CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  8. 学习微信小程序之css9内边距

    padding内边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. css 外边距,内边距的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. CSS -- 盒子模型之边框、内边距、外边距

    一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...

随机推荐

  1. 一:安装Scala

    Scala是一种类似Java的纯面向对象的函数式编程语言,由于函数具有明确的确定输入对确定输出的关系,所以适合推理和计算,一切函数都可以看成一系列的计算组成,另外由于Scala函数是没有副作用和透明的 ...

  2. 关于openstack自动化安装的一点思考

    在openstack针对具体应用的解决方案已成型之后,按照官方文档安装openstack实际上就成了一个繁琐的事情. 我有一个设想,之前实施了一点,还未成功,但是也想记录下来.最终目标:使用U盘直接部 ...

  3. 同名项目复制,发布新项目,提示已存在该项目于webapp

    来自为知笔记(Wiz)

  4. 基于Docker部署私有npm

    NPM作为前端最cool及最烂的包管理器,它解决困扰前端工程化发展中代码模块管理的大问题.但是随着业务需求的发展,我们的代码从以前的单项目复用,延伸出了多项目复用的需求.本来项目之间代码复用管理的情景 ...

  5. Spring 3.x 企业引用开发实战(陈雄华/林开雄)

    目录 ... 第一章:Spring概述 IoC:BeanFactory.Context.El(SpringEL表达式) AOP:允许JVM虚拟机启动时使用代理类在运行时期修改指定类的字节码,改变一个类 ...

  6. C++中指向对象的常指针和指向常对象的指针

    指向对象的常指针 将指向对象的指针变量声明为const型,并使之初始化,这样指针值始终保持为其初始值,不能改变. Time t1(10,12,15),t2; Time * const ptr1=&am ...

  7. 笔试题: 数据库 已看1 一些关键的sql语句练习 和选择题 有用 sql语句练习 挺好

    一.     选择题 1.SQL语言是( C )语言. A.层次数据库 B.网络数据库 C.关系数据库 D.非数据库     redis 是 3.如果在where子句中有两个条件要同时满足,应该用哪个 ...

  8. Jenkins配置有用摘抄笔记

    使用jenkins配置.net mvc5网站自动构建全过程记录  转自:http://www.cnblogs.com/baiyunchen/p/4724350.html 持续集成是个简单重复劳动,人来 ...

  9. Entity Framework Code-First(10.2):Entity Mappings

    Entity Mappings using Fluent API: Here, we will learn how to configure an entity using Fluent API. W ...

  10. 22. Bypass X-WAF SQL注入防御(多姿势)

    0x00 前言 X-WAF是一款适用中.小企业的云WAF系统,让中.小企业也可以非常方便地拥有自己的免费云WAF. 本文从代码出发,一步步理解WAF的工作原理,多姿势进行WAF Bypass. 0x0 ...