行内元素，行内块元素以及块级元素的区别_简述行内元素、行内块元素以及块级元素的区别并举例-CSDN博客

本文链接：https://blog.csdn.net/weixin_45263818/article/details/105325430

行内元素

顾名思义，行内元素就是不换行，与其他内联元素共行。HTML常用的行内元素有：
span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）等
行内元素可以设置元素的高度与宽度，但宽度只与内容有关，用line-height控制高度，不可设置整体高度和宽度，padding左右起作用，上下不会影响行高，margin左右作用起作用，上下不起作用。
举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 300px;
            border: 1px solid red;
        }
        a{
            width: 100px;
            height: 20px;
            font-size: 30px;
			margin-top:10px;
            padding-top:20px ;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">A1</a>
        <a href="#">A2</a>
        <a href="#">A3</a>
        <a href="#">A4</a>
    </div>
</body>
</html>

可以看到，对行内元素设置宽高是无用的，同样padding，margin的上下属性也是无用的

块级元素

总是从新行开始，独占一行，HTML常用的块级元素有：
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等
块级元素默认宽度是父容器宽度的100%，可以设置高与宽，可以设置margin和padding任意方向
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
上面的例子中若给a元素添加display：block属性，就可以实现想要的结果

行内块元素

不独占一行的块级元素，在某种程度上可实现与浮动的相似的效果，但是inline-block占据文档流，所以不会产生父容器坍塌问题。HTML中的按钮元素button（默认display：inline-block）。
同样，上面的例子中若给a元素添加display：inline-block属性，也可以实现想要的结果

本文同样发布在我的个人博客上，博客今日开通了留言板功能，大家有疑问可以提问，我会尽力解答