【1】padding 与 元素的尺寸


  ——对块级元素

   (1) 当width 为非 auto 时,padding 会影响元素尺寸

   (2) 当width 为 auto 或box-sizing 为 border-box 时,padding 不会影响元素尺寸

——对内联元素

  (1) 水平 padding 影响尺寸,垂直 padding 不影响尺寸,但会影响背景占据的空间


【2】padding 负值 与 百分比值

  (1) padding 不支持 负值

  (2)  使用 padding :50% ;可以实现一个正方形区域

  (3) inline 水平元素的 padding 百分比值 : 同样相对于宽度计算,默认的高宽度细节有差异,padding 会断行


【3】标签元素的内置 padding

  (1)ol 、li 元素内置 padding-left ,单位是 px ,不是em (平时的网页开发,设置22-25 px)

  (2)谷歌浏览器下是 40 px

  (3) 字号小的时候,间距会很开,字号很大的时候,序号会跑到容器外去


【4】 表单元素的内置 padding

  (1) 所有浏览器的 input / textarea 输入框 内置 padding

  (2)  所有浏览器 button 按钮内置 padding

  (3)  部分浏览器 select x下拉框内置 padding ,如 火狐,IE8+ 可以设置 padding

  (4) 所有浏览器 radio /checkbox 单复选无内置 padding

  (5) button 按钮元素的 padding 最难控制 :

css 之 paddingcss 之 padding

css 之 padding


【5】 padding 与 图形绘制

css 之 padding



css 之 padding


【6】 padding 与 布局

—— 使用百分比单位构建固定比例布局结构

css 之 padding

—— 配合margin 实现等高布局

css 之 padding

——两栏自适应布局

css 之 padding



css 之 padding

相关文章:

  • 2021-12-23
  • 2021-08-30
  • 2022-12-23
  • 2022-12-23
  • 2021-11-06
  • 2021-12-18
  • 2021-08-03
  • 2022-01-28
猜你喜欢
  • 2021-11-05
  • 2022-12-23
  • 2022-12-23
  • 2021-08-11
  • 2022-12-23
  • 2021-10-15
  • 2021-12-15
相关资源
相似解决方案