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. 将本地代码初始化上传到gitlab仓库

    首先你已经安装了git. 1.在本地代码目录,鼠标右键Git Bash Here: 2.执行git命令,此命令会在当前目录下创建一个.git文件夹, git init 3.将项目的所有文件添加到仓库中 ...

  2. 前端传递的json格式与SpringMVC接收实体类的对应关系

    这篇文章主要是帮助刚刚入行的猿猿尽快适应Restful风格的搬砖生活 @RequestBody注解 基本介绍:@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数 ...

  3. 使用notepad++的nppexec插件格式化json和压缩json内容

    1.遇到问题 因为平时需要查看json内容,有时候修改后需要压缩json,虽然已经有网页可以实现,但每次打开网页也很麻烦啊.虽然notpad++也有NPPJSONViewer这个插件,但是目前只有格式 ...

  4. c# 常用帮助类

    C#常用帮助类 因为小土现在还是处于小白阶段,所以自己的知识技术还达不到要求,但是小土在网上找到一个大神的,等以后小土技术有了一定提升以后,在走自己的路,啥也不说了上货. 地址 :https://gi ...

  5. allure测试报告

    首先如果你没有安装 pytest 库的话,先使用 pip 安装一下: pip install pytest 另外还需要安装 pytest 支持 allure 报告的插件库: pip install a ...

  6. 解释器( interpreter ) 与 编译器( compiler ) 的对比

    什么是解释器与编译器 1.解释器 解释器是一种计算机程序,它将每个高级程序语句转换成机器代码. 2.编译器 把高级语言编写的程序转换成机器码,将人可读的代码转换成计算机可读的代码(0和1). 3.机器 ...

  7. apache自带的ab测试失败请求原因

    只要出现 Failed requests 就会多出现一行要求失败的各原因的数据统计,分别有 Connect, Length, 与 Exception 三种,分别代表的意义为:Connect       ...

  8. 工程化编程实战callback接口学习笔记

    一.编译并运行 help.version命令执行正常,但quit命令出错 二.Debug 从命令输入到执行过程: 源代码: 更改后: 运行结果:能正确运行quit命令 Callback接口学习成果: ...

  9. java开发环境配置,看这一篇就足够了!

    可能平时大家对于安装环境的需求不是那么强烈,但是当你换了一台新电脑时,你就会发现怎么也得花费你几个小时乃至半天一天的时间.故此整理此篇文章,给有需要的小伙伴 注:本文皆win10环境 (1).JDK的 ...

  10. 干货分享:一键网络重装系统 - 魔改版(适用于Linux / Windows)

      简介 一键网络重装系统 - 魔改版,它可以通过Internet重新安装Linux和Windows以及常见的操作系统.例如:Linux(CentOS,Debian,Ubuntu.etc..),Win ...