图片默认底部3px缝隙

最新推荐文章于 2022-01-04 15:25:36 发布

端脑

最新推荐文章于 2022-01-04 15:25:36 发布

阅读量213

点赞数

分类专栏：前端文章标签：图片默认底部3px缝隙

本文链接：https://blog.csdn.net/qq_43776742/article/details/103377848

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

图片默认底部3px缝隙
word-break
white-space
text-overflow 文本溢出

图片默认底部3px缝隙

解决办法 display:block 或vertical-align: tophtml

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        
        img {
            /*vertical-align: top;*/    /*法一：使图片顶部对齐，消除偏差。*/
            display: block;         /*法二：是元素变为块级元素，消除偏差。*/
        }
    </style>
</head>

<body>
    <div>
        <img src="1.png" alt="" />
    </div>
</body>

</html>

word-break属性

处理英文单词

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	  width: 120px;
	   	  height: 40px;
	   	  border: 1px solid red;
	   	  word-break: normal; /*默认值*/
	   	  word-break: break-all;/*允许在单词内换行*/
	   	  word-break: keep-all;/*只能在半角空格或连字符处换行*/
	   }
	</style>
</head>
<body>
	<div>I am a-long,what is your name</div>
</body>
</html>

white-space

white-space:nowrap 强制一行显示文本

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	  width: 100px;
	   	  height: 40px;
	   	  border: 1px solid red;
	   	  white-space: nowrap;
	   }
	</style>
</head>
<body>
	<div>我是一个农民的孩子,深爱着这片土地1112222</div>
</body>
</html>

text-overflow 文本溢出

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 30px;
            border: 1px solid #ccc;
            white-space: nowrap; /*强制性在一行显示文本 */
            overflow: hidden; /*对溢出的文本进行隐藏*/
            /*text-overflow: clip;*/ /*文本溢出时，用...来处理。*/
            text-overflow: ellipsis;/*文本溢出时，用...来处理。*/
        }
    </style>
</head>

<body>
    <div>
        书山有路勤为径，学海无涯乐作舟。
    </div>
</body>

</html>

返回目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片默认底部3px缝隙

图片默认底部3px缝隙解决办法 display:block 或vertical-align: tophtml<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="te...
复制链接

扫一扫