css中去除图片间隙和文本框按钮不对齐情况的处理

最新推荐文章于 2022-06-30 09:24:56 发布

silence^

最新推荐文章于 2022-06-30 09:24:56 发布

阅读量631

点赞数

本文链接：https://blog.csdn.net/lyclyc_/article/details/106968832

版权

本文介绍了如何使用CSS处理图片间隙问题，包括通过设置margin-top负值、父元素字体大小为0、改变图片display属性为block以及设置垂直对齐方式来消除图片之间的间距。此外，还提到了文本框按钮对不齐的情况，并提供了相关代码解决方案。

摘要由CSDN通过智能技术生成

1，去除图片间隙
如下图
在这里插入图片描述
Img属于行块级元素，所以有空格
将div设置为inline-block属性之后，div标签之间也会存在间距。
内部原理：所有display属性为inline、inline-block的盒模型都会有文字特征，间距就是由于两个标签之间的空白引起的。（所谓两个标签之间的空白就是：比如写完一个img标签之后会点击enter换行去写下一个div盒子，这个回车换行就是空格）

方法（1）可以设置下面的box盒子，margin-top:负值
（2）设置父盒子字号为0

.wrap {
   
             font-size: 0; 
        }

（3）改变图片的display:
img {
display: block;
}
(4)给图片设置垂直对齐方式：
img {
vertical-align: middle;
}

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

最低0.47元/天解锁文章

silence^

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css中去除图片间隙和文本框按钮不对齐情况的处理

1，去除图片间隙如下图Img属于行块级元素，所以有空格将div设置为inline-block属性之后，div标签之间也会存在间距。内部原理：所有display属性为inline、inline-block的盒模型都会有文字特征，间距就是由于两个标签之间的空白引起的。（所谓两个标签之间的空白就是：比如写完一个img标签之后会点击enter换行去写下一个div盒子，这个回车换行就是空格）方法（1）可以设置下面的box盒子，margin-top:负值（2）设置父盒子字号为0.wrap {
复制链接

扫一扫