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

2024-09-03 12:39:13

一、典型代表

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>

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

<body>

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

</body>

最新文章

热门文章