图片底部默认有空白缝隙bug的解决方案

文章目录

      • 1.指出bug
      • 2.解决bug

1.指出bug

bug描述:我们通常会在一个容器中包裹着一张图片,但是图片下面默认会有一个空白缝隙。

原因:行内块元素会和文字的基线对齐。

我们来看看这个bug:


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>精灵图title>
    <style>
      * {
      
        margin: 0px;
        padding: 0px;
      }
      .container {
      
        border: 1px solid black;
      }
    style>
  head>
  <body>
    <div class="container">
      <img src="images/img.jpg" />
    div>
  body>
html>

效果图:
图片底部默认有空白缝隙bug的解决方案_第1张图片
为什么会有个空白缝隙呢?因为图片与文字的对齐方式默认是基线对齐,它空白处是留给文字的基线与底线之间部分文字显示的。加入文字说明问题:

图片底部默认有空白缝隙bug的解决方案_第2张图片

2.解决bug

那我们既然知道了是由于图片与文字对齐方式是基线对齐,那么我们就更改为其它方式对齐即可解决bug。

语法:

vertical-align:baseline|bottom|middle|top

默认是vertical-align:baseline,我们只要将属性值改为其它三个中任意一个即可解决bug。

代码:


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空隙bugtitle>
    <style>
      * {
      
        margin: 0px;
        padding: 0px;
      }
      .container {
      
        border: 1px solid black;
      }
      .container img {
      
        vertical-align:
      }
    style>
  head>
  <body>
    <div class="container">
      <img src="images/img.jpg" />
      I am YaRong
    div>
  body>
html>

图片底部默认有空白缝隙bug的解决方案_第3张图片
这就没有了空白缝隙,解决BUG。

你可能感兴趣的:(布局效果,css3,css,前端,小程序)