CSS 世界 4.2.1 padding 与元素的尺寸

未知的知识

• 块状元素设置 border-box， padding 值足够大，width 也会无效。

/* 最终宽度为 120px，内容表现为首选最小宽度 */
.box {
    width: 80px;
    padding: 20px 60px;
    box-sizing: border-box;
}

• 内联元素的 padding 也会在水平和垂直方向影响布局，这种影响可以是视觉层面，也可以是影响外部尺寸大小的。
  • 在视觉层面可以利用 padding 增加移动端链接可点击区域大小。
  • 还可以利用这一点解决锚点定位问题

a {
    padding: 50px;
    background-color: #cd0000;
}

demo

demo.cssworld.cn/4/2-1.php