1. 程式人生 > >css-淘寶網站——實現幾張圖片橫排中間沒有空隙

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;

           }

正常手段就是這樣來處理的。