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>

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

原文地址:https://www.cnblogs.com/EricZLin/p/8606210.html