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. Presto在滴滴的探索与实践

    ​桔妹导读:Presto在滴滴内部发展三年,已经成为滴滴内部Ad-Hoc和Hive SQL加速的首选引擎.目前服务6K+用户,每天读取2PB ~ 3PB HDFS数据,处理30万亿~35万亿条记录,为 ...

  2. day70:Vue:Git&路飞学城页面效果

    目录 1.Git 2.路飞学城项目页面效果 0.安装elements UI 1.顶部导航栏效果 2.轮播图效果 1.Git 什么是git?分布式版本管理工具 1.git操作 # 1 创建git本地仓库 ...

  3. 解决Android RadioGroup跑到输入法上面

    Android开发过程中,发现一个小问题,当我们点击屏幕下面的输入框时,我们的RadioGroup会跑到输入法的上面去,如下图 两种解决方法 1.Manifest.xml文件activity标签中添加 ...

  4. STC 核心板 入门记

    写在开始 STC核心板,它的软件十分全面,想要什么都有,非常适合新手入门. 上一次电赛刚结束,现在反正也啥也不太会,干脆学个这个吧. 顺便写篇博客记录一下. 记录第一次烧写 周四下单,周六到货.中午拿 ...

  5. 050_Dos命令

    目录 Dos命令 打开Dos控制台 管理员方式运行 常用的Dos命令 Dos命令 打开Dos控制台 开始->附件->命令提示符 Window+R 输入cmd(推荐使用) 在任意文件夹下-& ...

  6. Vue基础(2)

    fetch与axios请求数据 fetch基本语法: fetch(url,{parmas}).then(res=> res.json()  //返回promise对象 ).then(data=& ...

  7. G1摘要

    G1 启动参数示例 -XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=256m -XX:+PrintTenuringDistribution -XX:+UseG1 ...

  8. origin把点图和线图放在一起

    首先分别做好点图和线图在两个graph中,然后选中其中一副图(点图或者线图),然后按下图选择: 如果有多个图,可以在弹出窗口中选择多个sheet.

  9. javascript模块化(简)

    这里书写一个个人理解以及整理的东西,关于模块化以及ES6语法推荐大家阅读阮一峰老师的ES6入门教程 地址:https://es6.ruanyifeng.com/ 比较散,请见谅 以前的js是没有模块化 ...

  10. B站:我是程序汪:电话面试(待更新)

    电话面试: 商城: 1.spring bean的生命周期你可以简单描述一下吗? 能记得几个接口名吗? 2.springMVC的处理流程 3.项目出现生产问题,排查日志有什么方法吗,思路,大概说一下 4 ...