多個Img標簽之間的間隙處理方法

firim 發布于2019-04-23 13:21 / 3363人閱讀

摘要：多個標簽寫在一行郁金香郁金香郁金香郁金香效果前效果后將要閉合標簽的地方與開始標簽的地方重合郁金香郁金香使用注釋頭尾相連郁金香郁金香在標簽的父級上寫推薦是用這個方法。

1.多個標簽寫在一行

<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>

<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>

效果前：

效果后：

2.將要閉合標簽的地方與開始標簽的地方重合

<img src="/i/eg_tulip.jpg"   alt="郁金香" height="100px"
/><img src="/i/eg_tulip.jpg"   alt="郁金香" height="100px" />

3.使用注釋頭尾相連

<img src="/i/eg_tulip.jpg"   alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg"   alt="郁金香" height="100px" />

4.在img標簽的父級上寫：font-size:0;? 推薦是用這個方法。這個方法我已經實踐簡單實用

<div style="font-size:0">
   <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
   <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
div>

效果：

5.使用display：block(img是內聯元素)

<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px" style="display:block"/>
<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px" style="display:block"/>

效果:

6.使用letter-spacing屬性

<div style="letter-spacing:-800px">
    <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
    <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
div>

效果:

文章來自趙啟澤博客 http://www.cnblogs.com/zqzjs/ 總結的很棒

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1756.html

踩坑日記(持續更新...)

摘要：二按照官方的提示解決了意思就是切到分支，自己的分支解決沖突，提交。這是和二相反向的操作頁面標題無效的解決辦法強類型轉換的坑條件用正則返回的布爾值結果返回了條件結果也返回了。 2018/3/2 1,vue的{{}}怎么失效了項目使用了twig模板渲染語法{{}}沖突，使用v-text v-html渲染可以寫表達式的寫法字符+變量 2，函數防抖節流封裝實用的下拉加載更多代碼demo...

taoszu 2019-08-22 15:00 評論0 收藏0
CSS學習筆記－圖片img與父元素div之間的間隙解決

摘要：前言之前在寫網頁的時候有一個展示圖片的需求我使用一個包裹一個但是在瀏覽器中預覽的時候碰到了一下的問題仔細看圖片和之間有間隙。正文指定了行內元素或表格單元格元素的垂直對齊方式摘錄自。設置父元素字體大小為所用的值是無單位數值乘以元素的。前言之前在寫網頁的時候有一個展示圖片的需求,我使用一個div包裹一個img,但是在瀏覽器中預覽的時候碰到了一下的問題,showImg(https://s...

Chiclaim 2019-08-30 12:44 評論0 收藏0
img的間隙

摘要：變成塊元素文章前部分講到了只是對于內聯元素而言，自己的給添加樣式將其轉為塊元素自然間隙就會消失，不過這樣也會產生一些副作用。 showImg(https://segmentfault.com/img/remote/1460000006808609); *{ padding: 0px; margin: 0px; } .test{ border: 1px solid...

妤鋒シ 2019-08-29 11:13 評論0 收藏0
CSS學習筆記

CSS學習筆記在學習CSS的過程中做的一些記錄，用于未來的快速回憶。 HTML常見元素和理解 head中的元素指定字符集 meta name=viewport content=...定義視圖大小與設備屏幕大小的比例，用戶是否可縮放指定基準路徑 body中的元素 a[href, target] img[src, alt] table td[colspan, rowspan] for...

bawn 2019-08-29 17:27 評論0 收藏0