padding有一个陷阱,你平常可能不太注意。

行内元素上设置的内边距不会影响行高计算;因此,如果一个行内元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。

对于块元素,利用padding结合box-sizing可以轻松制作类似 三列高度相等,左右宽度固定,中间自适应的布局,

box-sizing有两种方式 border-box  content-box

需要注意的是对于火狐,box-sizing属性居然需要加前缀  -moz-box-sizing,而且它还支持第三种格式:padding-box

各种浏览器都有神奇的地方。神啊,这真是既痛苦又有乐趣啊。

分久必合,合久必分。HTML5来解放我们一段时间吧。

padding的讲究的更多相关文章

  1. web兼容学习分析笔记-margin 和padding浏览器解析差异

    二.margin 和padding浏览器解析差异 只有默认margin的元素 <body>margin:8px  margin:15px 10px 15px 10px(IE7) <b ...

  2. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  3. padding/border与width的关系

    本文讲述 padding / border 的设置后是否对 width 有影响,width 等于 auto 与 100% 的区别 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边 ...

  4. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  5. css padding 填充

    语法: padding:[ <length> | <percentage> ]{1,4} 默认值:看每个独立属性 适用于:所有元素,除 table-row-group | ta ...

  6. W3School-CSS 内边距 (padding) 实例

    CSS 内边距 (padding) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CS ...

  7. margin和padding的区别

    目前web2.0已经越来被人们认可,因为喜欢搞web开发的人员不得不硬着头皮去学习web2.0的标准,其中很重要的一条就是新的布局规则,div+css.以前基本上是用table布局的,这种传统的方式简 ...

  8. padding

    padding-top:20px;上内边距 padding-right:30px;右内边距 padding-bottom:30px;下内边距 padding-left:20px;左内边距 paddin ...

  9. 浅谈Margin和Padding值设置成百分数的布局

    转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...

随机推荐

  1. ansible-playbook模板化(jinja2)

    1. ansible-playbook模板化(jinja2)条件与循环  1.1) jinja使用结构图 2. 编写jinja2的循环  2.1) 编写jinja2模板 1 [root@test-1 ...

  2. Springboot+JPA下实现简易爬虫:豆瓣电视剧数据

    Springboot+JPA下实现简易爬虫:豆瓣电视剧数据 前言:今天听到产品那边讨论一些需求,好像其中一点是用户要求我们爬虫,在网页上抓取一些数据然后存到我们公司数据库中,众所周知,爬虫的实现对于p ...

  3. 双栈排序(洛谷P1155)二分图的判定+思维贪心

    题目:戳这里 题目大意: 给你一个数列,问能否通过两个栈的push与pop把它输出成一个升序序列(每个数只能入队并出队一次) 不能的话输出0,能的话输出操作方法 主要思路: 1.判断是否可以成功输出升 ...

  4. selenium---输入内容后搜索

    from time import sleep from selenium import webdriver br = webdriver.Chrome() url = "https://ww ...

  5. selenium分布式启动(deepin)

    1.deepin安装jdk: 下载地址:链接:https://pan.baidu.com/s/19-pU8G6RzMW92uBCxBH7sA 密码:1c7n 解压:tar -zxvf jdk-8u20 ...

  6. 对接天猫精灵X1 (https 的申请)

    1 起因 公司是做智能家居的,最近公司要求对接天猫精灵的智能家居功能,所以就来对接天猫精灵X1 了. 新产品,大家都懂的,坑是有不少的,正常事. 1 首先,语言是 c#,不要和我讲 php 是世界最好 ...

  7. C#Socket通讯(1)

    前言 因为自己需要开发一款自己的游戏,因为设计网络方面,所以我找了很多的资料,再加上考虑到Unity游戏客户端直接连接数据库很容易导致数据库泄露,再加上网上很多的服务端都是用控制台做的,所以我就想做个 ...

  8. 【CF1436B】Prime Square 题解

    原题链接 题意简介 要求构造一个由不大于 1e5 的非负数构成的正方形矩阵,矩阵的每个元素不是质数,但每一行.每一列的数字的和都是质数. 思路分析 看到样例二,我们知道数字可以重复. 于是,我们很容易 ...

  9. Vue-cli3以上安装jquery

    vue-cli3以上就没有webpack.config.js这个文件了,所以在安装jquery时 终端执行  npm install jquery --save 之后查看package.json 安装 ...

  10. Foundation 用于开发响应

    Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架. Foundation 是一个易用.强大而且灵活的框架,用于构建基于任何设备上的 Web 应用. Fou ...