在做网页的时候经常会出现一个令人困惑的现象。那就是行内元素和块级元素之间会出现“留白”。就是块级元素中明明只有一个行内元素，但行内元素却不会铺满块级元素。像这个例子：
“留白”出现的原因
行内元素默认是和父级元素的baseline对齐的，而不是父级元素的bottom。baseline有时候和父级元素bottom有一段距离。
解决办法一：
设置vertical-align:bottom;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .wrap{width:500px;height:300px;background: #ccc;margin:100px auto;} .box{border:1px solid red;} .box img{vertical-align: bottom;} </style> </head> <body> <div class="wrap"> <div class="box"> <img src="1.png" alt="" /> </div> </div> </body> </html>
解决办法二：
定义img的父容器的字体大小为0；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .wrap{width:500px;height:300px;background: #ccc;margin:100px auto;} .box{border:1px solid red;font-size:0px;} </style> </head> <body> <div class="wrap"> <div class="box"> <img src="1.png" alt="" /> </div> </div> </body> </html>
解决办法三：
把图片设置为块级元素；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .wrap{width:500px;height:300px;background: #ccc;margin:100px auto;} .box{border:1px solid red;} .box img{display: block;} </style> </head> <body> <div class="wrap"> <div class="box"> <img src="1.png" alt="" /> </div> </div> </body> </html>
解决办法四：
给父级div设定width,height.同时img设置width：100%；height:100%;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .wrap{width:500px;height:300px;background: #ccc;margin:100px auto;} .box{width:200px;height:200px;border:1px solid red;} .box img{width:100%;height:100%;} </style> </head> <body> <div class="wrap"> <div class="box"> <img src="1.png" alt="" /> </div> </div> </body> </html>