【图片三像素/图片空白间隙问题及解决方案】

༺๑码农小黑๑༻

已于 2022-07-15 11:47:01 修改

阅读量260

点赞数 2

文章标签： html5 css3 css

于 2022-06-28 20:27:21 首次发布

本文链接：https://blog.csdn.net/weixin_45298348/article/details/125434347

版权

该博客探讨了在网页设计中遇到图片排列和文字对齐问题的常见解决方案，包括使用`vertical-align`属性、转换图片为块元素、设置父元素`font-size:0`来消除空白间隙、添加浮动和绝对定位等方法。示例代码展示了如何实现图片的缩放效果和与文字的对齐，适用于创建响应式的网页布局。

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

问题：在遇到多个图片排列在一行或者设置图片与文字对齐的时候会出现

解决方案：

1.可以给图片设置【vertical-align:middle/top/bottom】

2.可以将行内块元素的图片转换为块元素

3.可以给图片的父元素设置：font-size:0;

4.添加浮动

5.添加绝对定位

以下是我在做实际练习遇到的问题并写了一种解决方案

~~~c
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<style>

* {

padding: 0;

margin: 0;

}

a {

text-decoration: none;

}

li {

list-style: none;

}

.box {

width: 980px;

height: 500px;

margin: 100px auto;

}

.header {

font-weight: 700;

font-size: 16px;

}

ul {

margin-left: 32px;

}

ul li {

float: left;

margin-right: 5px;

width: 210px;

height: 450px;

/* 解决行内块元素img的空白间隙 */

font-size: 0;

}

/* 缩放开始 */

.tp {

width: 210px;

height: 285px;

overflow: hidden;

}

ul li img {

width: 100%;

height: 100%;

}

ul li img:hover {

transition: all .8s;

transform: scale(1.2);

}

.tp:hover {

transition: all .8s;

box-shadow: 1px 1px 5px 5px rgba(238, 5, 226, 0.5);

}

/* 缩放结束 */

ul li h1 {

margin: 20px 0;

}

ul li h1 a {

font-size: 16px;

color: #4d4d4d;

}

ul li h2 {

margin-bottom: 10px;

font-size: 12px;

color: #640000;

}

ul li p {

font-size: 10px;

color: #0000ff;

}

ul li h1 a:hover {

color: #00a4ff;

}

</style>

<body>

<div class="box">

<div class="header">热播</div>

<ul>

<li>

<div class="tp">

<img src="../img/img1.png" alt="">

</div>

<h1><a href="#">神武赵子龙</a></h1>

<h2>怒，林更新不抱网红抱女神</h2>

<p>点击次数：242445次</p>

</li>

<li>

<div class="tp">

<img src="../img/img2.png" alt="">

</div>

<h1><a href="#">旋风十一人</a></h1>

<h2>胡歌变教练在撩前女友</h2>

<p>点击次数：242445次</p>

</li>

<li>

<div class="tp">

<img src="../img/img3.png" alt="">

</div>

<h1><a href="#">太阳的后裔</a></h1>

<h2>宋慧乔吃嫩草</h2>

<p>点击次数：242445次</p>

</li>

<li>

<div class="tp">

<img src="../img/img4.png" alt="">

</div>

<h1><a href="#">山海经之赤影传说</a></h1>

<h2>娜扎张翰再度联手</h2>

<p>点击次数：242445次</p>

</li>

</ul>

</div>

</body>

</html>
~~~