定义

  • 行内元素： 一个行内元素只占据内容所撑开的空间。
  • 块级元素： 块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。

区别

  • 块级元素独占一行，行内元素根据内容宽度决定换行。
  • 块级元素可以设置width、height等属性,行内元素则不生效。
  • 块级元素可以设置padding、margin等属性，行内元素padding、margin 等属性水平方向有效，竖直方向无效。
  • 块级元素可以包含行内元素、块级元素，而行内元素不能包含块级元素。
  • 行内元素水平居中text-align: center,块级元素水平居中margin: 0 auto;
  • 行内元素垂直居中
1
2
height:30px; 
line-height:30px

块级元素垂直居中

1
2
3
margin:0 auto;
height:30px;
line-height:30px

常见的行内元素和块级元素

1、常见的行内元素

1
<span><a><lable><strong><b><small><abbr><button><input><textarea><select><code><img><br><q><i><cite><var><kbd><sub><bdo>

2、常见的块级元素

1
<div><p><li><h1><h2><h3><h4><h5><h6><form><header><hr><ol><address><article><aside><audio><canvas><dd><dl><fieldset><section><ul><video>

总结：大功告成✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️