图片默认底部3px缝隙

  • 图片默认底部3px缝隙

  • word-break

  • white-space

  • text-overflow 文本溢出


图片默认底部3px缝隙

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


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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属性

处理英文单词


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<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 namediv>
body>
html>

返回顶层目录


white-space

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


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

返回顶层目录


text-overflow 文本溢出


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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>

返回顶层目录


返回目录

你可能感兴趣的:(前端,图片默认底部3px缝隙)