圖片垂直結構有空白
首先我們要知道這部分空白產生的原因。圖片默認的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>
