在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ css實(shí)現(xiàn)圖片環(huán)繞，這個(gè)白色的區(qū)域是怎么來的

css實(shí)現(xiàn)圖片環(huán)繞，這個(gè)白色的區(qū)域是怎么來的

clipboard.png
html代碼比較簡(jiǎn)單，就是6個(gè)img標(biāo)簽，css如下，

 img{
    width: 33.3%;
  }
  img:first-child{
    width: 66.6%;
    float: left;
  }

所有跟此部分相關(guān)的代碼就是這樣，貼一下html，就是6個(gè)img標(biāo)簽

  <img src="./../assets/imgs/panda.jpg" alt="">
  <img src="./../assets/imgs/panda2.jpg" alt="">
  <img src="./../assets/imgs/panda2.jpg" alt="">
  <img src="./../assets/imgs/panda2.jpg" alt="">
  <img src="./../assets/imgs/panda2.jpg" alt="">
  <img src="./../assets/imgs/panda2.jpg" alt="">

此外就是，這個(gè)效果應(yīng)該怎么實(shí)現(xiàn)呢？具體圖片類似下圖：五張圖片環(huán)繞主圖，圖與圖之間有間隙分開。
clipboard.png

回答
編輯回答
愿如初

img標(biāo)簽行內(nèi)元素，默認(rèn)情況下行內(nèi)元素，為了讓一行上的元素有一個(gè)統(tǒng)一的參考對(duì)齊的對(duì)象，默認(rèn)情況下便有基線對(duì)齊的設(shè)定，由于存在基線，所以就多出那么的一個(gè)間隙，通過改變行內(nèi)的對(duì)齊對(duì)象就可以解決vertical-align: baseline(默認(rèn))/top/bottom;

2018年4月11日 03:12
編輯回答
厭惡我

俗稱“幽靈空白節(jié)點(diǎn)”，詳細(xì)請(qǐng)參看張?chǎng)涡竦牟┛?，把img標(biāo)簽的父標(biāo)簽增加font-size:0就可以解決。

2017年8月11日 04:42
編輯回答
逗婦乳

可以用CSS的Grid布局

2017年4月20日 12:27
編輯回答
遺莣

建議吧img標(biāo)簽的父元素的font-size設(shè)置成0，

2017年8月24日 01:43
編輯回答
吢丕

空白是img標(biāo)簽之間的空行引起的, 解決方法是把img標(biāo)簽的父元素的font-size設(shè)置為0 或 將img標(biāo)簽寫緊湊些, 寫成
<img><img><img>這種

下面是實(shí)現(xiàn)

        body {
            margin: 0;
            padding: 0;
            font-size: 0;
        }
        img {
            padding: 0;
            margin: 0;
            display: inline-block;
            width: 33.3vw;
            height: 33.3vw;
            background-color: green;
        }
        img:first-child {
            float: left;
            width: 66.6vw;
            height: 66.6vw;
        }
2018年8月17日 15:51
編輯回答
安淺陌

行內(nèi)元素的基線在作怪。img是行內(nèi)元素，默認(rèn)display: inline; 它與文本的默認(rèn)行為類似，下邊緣是與基線對(duì)齊，而不是緊貼容器下邊緣，將fontsize設(shè)置為0就可以了。
傳送門 CSS深入理解vertical-align和line-height的基友關(guān)系

2017年11月1日 18:26