CSS padding（填充）和 CSS overflow （溢出）

CSS padding（填充）

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
padding（填充）
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。

属性定义及使用说明

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

实例:

• padding:10px 5px 15px 20px;
  • 上填充是 10px
  • 右填充是 5px
  • 下填充是 15px
  • 左填充是 20px
• padding:10px 5px 15px;
  • 上填充是 10px
  • 右填充和左填充是 5px
  • 下填充是 15px
• padding:10px 5px;
  • 上填充和下填充是 10px
  • 右填充和左填充是 5px
• padding:10px;
  • 所有四个填充都是 10px

注意： 负值是不允许的。

CSS overflow 属性

overflow属性指定如果内容溢出一个元素的框，会发生什么。

比如：overflow: auto;

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。与visible正好相反
scroll	无论内容是否超越范围，都将显示滚动条。不超范围的话，滚动条可见，但被禁用
auto	当内容超出范围时，显示滚动条，否则不显示。
inherit	规定应该从父元素继承 overflow 属性的值。

“overflow：auto”和“overflow：scroll”之间的区别？

overflow: scroll将隐藏所有溢出的内容并使滚动条出现在相关元素上。如果内容没有溢出，滚动条仍然可见，但被禁用。

overflow: auto 非常相似，但滚动条仅在内容溢出时出现。

overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的值为visible、scroll、hidden、auto