【学习笔记】CSS深入理解之padding

张鑫旭的CSS深入理解之padding学习笔记

padding与容器的尺寸

block元素

  • padding值过大,一定影响元素尺寸
  • width为定值,padding会影响元素尺寸
  • width为auto或者box-sizing为border-box,同时padding值没有暴走,不影响元素尺寸

inline元素:水平padding影响尺寸,垂直padding不影响尺寸,但是会影响占据空间(会显示背景色)

padding负值与百分比单位

  • padding不支持负值
  • padding百分比相对于自身宽度计算
  • inline元素的padding有断行效果
  • 空的inline元素padding高宽不相等,因为inline的垂直padding会让隐匿文本节点出现

标签元素的内置padding

ol/ul

  1. ol/ul元素内置padding-left,单位是px不是em
  2. 间距固定,字号过小显得间距过大,字号过大会溢出容器

radio/checkbox

无法设置padding

button

FireFox下清空按钮padding

button::-moz-focus-inner {
    padding: 0; 
}

FireFox下按钮高度计算问题,导致不兼容问题,所以一般使用自定义按钮

    原文作者:程然然然然然
    原文地址: https://segmentfault.com/a/1190000017321634
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞