JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-5-3 17:11:11

图片垂直结构有空白

首先我们要知道这部分空白产生的原因。图片默认的vertical-align:baseline(基线)

也就是字母X的下边距，如下图

可以看到图片是与字母x的下边距对齐的，也就是baseline，css2的文档中有这么一句解释，翻译过来也就是一个inline-block元素，如果里面没有inline元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

1.最简单粗暴也是最有效的方法：img{display:block;}

2.img{vertical-align:middle;}

3.设置包裹层 line-height：0，或者是设置font-size:0,*/

<style>
       *{
           margin:0;
           padding:0;
       }
      
       img{
           width:200px;
          /*第一种方法 因为可以设置width,height所以是inline-block*/
          display:block;
         /*第二种方法 个人赞同这一种，因为大部分图片和文字都是垂直居中的*/
           vertical-align:top/bottom/middle/text-top/text-bottom;
       }

 .parent{
           width:500px;
            vertical-align: middle; background:green;
  /*第三种方法 行高设置足够小*/
 line-height:0;
 /*第四种方法 将font-size设为0，实际上也是改变了line-height*/
 font-size:0; }

</style> </head> <body> <div class="parent"> <img src="./pic/1.jpg"></div> <span>abcdefghistuvwxyz啊不错的风格化ijklmn</span> </body> </html>

图片水平结构有空白

 <title>Document</title>
    <style>
       *{
           margin:0;
           padding:0;
       }
       .parent{
           width:500px;
            vertical-align: middle;
           background:green;
       }
       img{
           width:200px;
       
       }
     
</style>
</head>
<body>
     <div class="parent"><img src="./pic/1.jpg">
     <img src="./pic/1.jpg"></div>
   
</body>
</html>

效果图如下：

 <style>
       *{
           margin:0;
           padding:0;
       }
       .parent{
           width:500px;
           overflow: auto;
            vertical-align: middle;
           background:green;
       }
       img{
           width:200px;
           /*第二种解决方法*/
           float:left;
           display: block;
       }
     
</style>
</head>
<body>
第一种方法把img标签紧挨在一起对比上一页的代码就知道了

     <div class="parent"><img src="./pic/1.jpg"><img src="./pic/1.jpg"></div>
   
</body>
</html>

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

HTML图片标签空白解决方法