CSS行内块元素(内联元素)

一、典型代表

input
img

二、特点：

在一行上显示
可以设置宽高

<style type="text/css">
        img{
            width: 300px;
           /* 顶部对齐           */
            vertical-align: top;
        }
        input{
            width: 300px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <img src="../2.26/picture.jpg" alt="">
    <input type="text">
</body>

补充:行内块与行内块之间的空隙：如果两个span在HTML这样放置,会出现空隙,使用浮动可以去除这种间隙.

span {/*span转换为行内块,设置300宽高和黑色边框*/
            display: inline-block;
            border: 1px solid #000;
            width: 300px;
            height: 300px;
        }

<body>
    <span></span>
    <span></span>
</body>

CSS行内块元素(内联元素)

如果两个span一列排列,则之间会有2px的边框,变细可以使用负的margin值(具体可以参考另一篇文章：鼠标经过提高层级的一个demo)

<body>
    <span></span><span></span>
</body>

CSS行内块元素(内联元素)