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. devops-持续集成管理之SonarQube

    1. devops-持续集成管理之SonarQube  1) 代码质量七宗罪 编码规范:是否遵守了编码规范,遵循了最佳实践. 潜在的BUG:可能在最坏情况下出现问题的代码,以及存在安全漏洞的代码. 文 ...

  2. 多测师讲解python _string_高级讲师肖sir

    import stringprint (string.ascii_letters )#大小写英文:'#abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW ...

  3. spring 源码构建

    参照这里(按照下面链接一路绿灯) https://blog.csdn.net/chengqiuming/article/details/102331033 1.安装配置gradle环境 1).  配置 ...

  4. shell脚本算术运算

    自增自减操作 用let命令可以实现自增自减的命令,不需要$符号: #!/bin/bash set -e n=100 let n++ echo $n 还可以实现自增自减指定的值: #!/bin/bash ...

  5. 怎样学习C语言(献给迷茫的C爱好者)!

    一 .怎样学习C语言 很多人对学习C语言感到无从下手,经常问我同一个问题:究竟怎样学习C语言?我是一个教师,已经开发了很多年的程序,和很多刚刚起步的人一样,学习的第一个计算机语言就是C语言. 经过这些 ...

  6. 【值得收藏】C语言入门基础知识大全!从C语言程序结构到删库跑路!

    01 C语言程序的结构认识 用一个简单的c程序例子,介绍c语言的基本构成.格式.以及良好的书写风格,使小伙伴对c语言有个初步认识. 例1:计算两个整数之和的c程序: #include main() { ...

  7. nginx优化: timeout超时配置

    一,为什么要做连接超时设置? nginx在保持着与客户端的连接时,要消耗cpu/内存/网络等资源, 如果能在超出一定时间后自动断开连接, 则可以及时释放资源,起到优化性能.提高效率的作用 说明:刘宏缔 ...

  8. C++学习笔记---引用的本质

    本质:引用本质上是C++内部实现的一个指针常量 发现是引用的话,自动帮我们转换成指针常量 运行后,发现修改ref的值那么a的值也会一起改变,这就说明了引用的本质就是指针

  9. 在 Istio 中实现 Redis 集群的数据分片、读写分离和流量镜像

    Redis 是一个高性能的 key-value 存储系统,被广泛用于微服务架构中.如果我们想要使用 Redis 集群模式提供的高级特性,则需要对客户端代码进行改动,这带来了应用升级和维护的一些困难.利 ...

  10. 基于web的图书管理系统设计与实现(附演示地址)

    欢迎访问博主个人网站,记得收藏哦,点击查看 - - - >>>> 公众号推荐:计算机类毕业设计系统源码,IT技术文章分享,游戏源码,网页模板 小程序推荐:网站资源快速收录--百 ...