css-淘寶網站——實現幾張圖片橫排中間沒有空隙
淘寶網站——實現幾張圖片橫排中間沒有空隙
凡是帶有inline的元素都有文字特性,有文字屬性就該被分割。
1.<img src="1.jpg">
<img src="1.jpg">
<img src="1.jpg">
<img src="1.jpg">
把img之間的空格去了就可以實現。
<img src="1.jpg" ><img src="1.jpg" ><img src="1.jpg" ><img src="1.jpg" >
2. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
img{
width: 200px;
height: 100px;
margin-left: -5px;
}
</style>
<title></title>
</head>
<body>
<img src="1.jpg">
<img src="1.jpg">
<img src="1.jpg">
<img src="1.jpg">
</body>
</html>
但是這種方法不可以,當你做完一個網頁往伺服器上傳的時候,他會給你壓縮,把所有的空格和回車都給你去了,你在使用margin-left: -5px;的時候,圖片之間就會重疊。
img{
border: 0;
width: 200px;
height: 100px;
margin-left: -5px;
}
正常手段就是這樣來處理的。