display 属性区别

行内元素 inline，行内块元素 inline-block，块级元素 block 的区别

• （可通过 display 属性相互切换） （三个都会自动换行）

padding 会挤压设置的宽高，实际宽高=设置宽高-padding eg. width:300px; padding:10px;则实际的盒子宽度=300-10-10=280px

• inline：

  • 不会独占一行，
  • 没有宽高，宽高根据内容的变化而变化
  • margin 只可设置左右，无上下。
  • 可设置 padding 的上下左右

• inline-block:

  • 不会独占一行
  • 有宽高
  • margin，padding 都有上下左右

• block:

  • 独占一行
  • 有宽高，设置宽后仍独占一行
  • margin，padding 都有上下左右

  ---