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. Fedora version history --- kernel version

    Fedora version history https://en.wikipedia.org/wiki/Fedora_version_history     Version (Code name)[ ...

  2. 用 Java 实现的八种常用排序算法

    八种排序算法可以按照如图分类 交换排序 所谓交换,就是序列中任意两个元素进行比较,根据比较结果来交换各自在序列中的位置,以此达到排序的目的. 1. 冒泡排序 冒泡排序是一种简单的交换排序算法,以升序排 ...

  3. Python 疑难问题:[] 与 list() 哪个快?为什么快?快多少呢?

    本文出自"Python为什么"系列,请查看全部文章 在日常使用 Python 时,我们经常需要创建一个列表,相信大家都很熟练了吧? # 方法一:使用成对的方括号语法 list_a ...

  4. PHP-FPM包的安装与配置 转

    实验环境:CentOS7 [root@~ localhost]#yum -y install php-fpm php-fpm包:用于将php运行于fpm模式 #在安装php-fpm时,一般同时安装如下 ...

  5. 2020-2021-1 20209313 《Linux内核原理与分析》第一周作业

    遇到的问题:安装ubuntu遇到问题 描述:在本机上虚拟机的安装包点开就闪退,无法安装VMware 解决方案: 清理VMware相关注册表,更改用户名为英文,查阅相关资料,重装系统. 更换linux安 ...

  6. Anderson《空气动力学基础》5th读书笔记 第2记——流体静力学初步

    与物体在水中受到水的浮力一样,空气中的物体也会受到空气的浮力,但由于这个浮力往往比较小,实际中的很多问题我们常常将它忽略,而对于像热气球这样的靠空气的浮力产生升力的飞行器来说,空气的浮力是不能忽略的. ...

  7. 【C++】 C++异常捕捉和处理

    在阅读别人开发的项目中,也许你会经常看到了多处使用异常的代码,也许你也很少遇见使用异常处理的代码.那在什么时候该使用异常,又在什么时候不该使用异常呢?在学习完异常基本概念和语法之后,后面会有讲解. ( ...

  8. 解决Java连接Oracle 12c存在的问题

    感谢作者 原文链接:https://blog.csdn.net/peng_wei_kang/article/details/80403486 1.发现项目报以下错误:   Caused by: jav ...

  9. 基于ssm的客户管理系统

    查看更多系统:系统大全,课程设计.毕业设计,请点击这里查看 01 概述 一个简单的客户关系管理系统 管理用户的基本数据 客户的分配 客户的流失 已经客户的状态 02 技术 ssm + jdk1.8 + ...

  10. Linux下更新JDK版本

    date: 2018-11-18 11:04:13 updated: 2018-11-18 11:04:13 1.输入 su 进入管理员权限 2.输入 rpm -qa | grep jdk 查看当前系 ...