inline, block, inline-block区别

inline, block, inline-block区别

• inline
  • Not height and width;
  • Not margin-top & margin-bottom;
  • Always occupy area only necessary.(Actually, the margin-right hold the rest space from element’s right edge to line right edge.实际上是margin-right填充了该行剩余的宽度)
• block
  • Having everything to Box Model;
  • Full a line.
• inline-block
  • Have everything to Box Model;
  • Occupy area only necessary. (margin-left will not hold the rest space of line).

All in all, inline/block/inline-block rule the box model behavior to element:

• inline: didn’t height/width and margin-top/margin-bottom
• block: have everything and marign-right hold rest space to the line.
• inline-block: normal act.