前端新人调导航栏，把a标签加上display: block后突然能独占一行、还能设高度了，他以为这是万能居中术。其实display: block只是改变了元素在布局里的盒子类型，理解这点，很多样式问题自然就通了。

inline和block的区别

行内元素像span、a，宽度由内容撑开，设width和height无效，上下margin也不生效。块级元素像div、p会独占一行，宽度默认撑满父容器，宽高和四个方向的margin都吃。改成block，就是把行内元素按块级规则来排布。

block的三个典型用途

  • 扩大点击区：把a设成block再给padding，整块都能点，移动端体验立刻好。
  • 做列表导航：让li或a纵向铺满，配合背景色做整条高亮。
  • 用margin auto居中：块级元素设固定宽度后，左右margin设auto才能水平居中，行内元素不行。

容易踩的两个坑

设成block后元素会换行。如果你只想能设宽高又不想换行，应该用display: inline-block。另外block会撑满父宽，父容器没设宽度时看着正常，一旦父级是flex或grid子项，行为又不一样。做水平排列别再用block加浮动，现在的写法是父级用flex。

什么时候别用它

纯文字强调、图标前后的小标签，保持inline更自然，改block会破坏行内排版让文字断成两行。判断标准很简单：这个元素需要独占一行、需要设宽高、或者需要垂直方向margin，就改block，否则老实留着。