关于 a (链接)标签 里面包含图片会被撑大的解决方法、a标签会撑大的解决方法

目录

1、快看(解决方法)

2、原因

3、代码演示

 4、flex布局的代码演示

---

今天在做一个flex的项目，用一个a标签里面包含img图片，这事再平常不过的布局方式，然而a标签突然莫名其妙的被撑大，研究了很久才最终解决。

下面的示例虽然不是用flex布局做的，但原理是一样的。

1、快看(解决方法)

1、将 a 的  font-size 大小设置为0。

2、将图片转化为块级元素 display：block;

2、原因

a继承他的祖先（大多数是继承body）的样式，让a具有font-size的大小，把a给撑开了；

3、代码演示

先写style样式，写一个项目再平常不过的css样式，给a加一个orange的背景颜色

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            margin: 0 auto;
            font: normal 14px/1.5 "Microsoft Yahei";
            color: #000;
            background-color: #f2f2f2;
        }
        
        div {
            box-sizing: border-box;
        }
        
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
        }
        
        a {
            background-color: orange;
        }
        
        a img {
            width: 100%;
        }
    style>
head>
 

body样式： box盒子里面包含 a链接标签 a 中包含一张图片，这种布局方式非常常见。

  <div class="box">
        <a href="#">
            <img src="images/12.jpg" alt="">
        </a>
    </div>

结果如图所示： 明显看出a有宽和高(橘黄色部分)

 a会莫名其妙有一个大小，给a 设置margin:0；  padding:0; 都不管用

1、如果将a标签的font-size:0;    ------->    成功解决

         a {
            background-color: orange;
            font-size: 0;
          }

2、如果将a标签里面的图片标签的display:block;    ------->    成功解决

        a {
            background-color: orange;
            /* font-size: 0; */
        }
        
        a img {
            width: 100%;
            display: block;
        }

 4、flex布局的代码演示

.sales-bd .row {
    display: flex;
}
 
.sales-bd .row a {
    flex: 1;
    background-color: pink;
    height: 100%;
}
 
.sales-bd .row a img {
    width: 100%;
    display: block;
}

结果如图所示：左边是撑大的，右边是解决后的。