CSS行内块元素

最新推荐文章于 2023-12-08 09:49:08 发布

一心一意对前端

最新推荐文章于 2023-12-08 09:49:08 发布

阅读量2.1k

点赞数

文章标签：前端大前端 css css3 html

本文链接：https://blog.csdn.net/weixin_53144068/article/details/112563700

版权

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>

如果两个span一列排列,则之间会有2px的边框,变细可以使用负的margin值

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一心一意对前端

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS行内块元素

CSS行内块元素(内联元素)一、典型代表inputimg二、特点：在一行上显示可以设置宽高<style type="text/css"> img{ width: 300px;/* 顶部对齐 */ vertical-align: top;} input{ width: 300px; height: 200px; background-color: blue; } </style></head><body
复制链接

扫一扫