解決img標籤自帶外邊距問題

2022-06-05 14:48:14 字數 985 閱讀 9207

三種方法去除img標籤自帶外邊距。

目錄

頁面效果:

圖1-img的高度是100px

圖2-父容器div的高度卻是104px

第乙個div中包裹img標籤,img標籤的高度設定為100px,但是第乙個div的高度卻是104px。上面圖1中可以看到兩個div之間出現了一條「白邊」,這個邊距並不是我們設定的,而不同瀏覽器解析出來的這條「白邊」的距離可能是不相同的,這就非常地影響我們布局。在實際布局中經常會遇到這個問題,該如何解決呢?這裡給出三種方法來去除img標籤自帶的這條「白邊」。

只需要給img標籤加上「display: block」即可,**和頁面效果如下:

頁面效果:

圖3-兩個div之間的「白邊」不見了

可以看到,兩個div之間的「白邊」不見了。

手動給img標籤的父容器指定高度,這裡將其高度設定為100px,和img標籤相同,同樣可以去除兩個div之間的「白邊」。

頁面效果如上面圖3。

將img標籤父容器的font-size屬性設定為0,如果父容器內有其他子元素需要設定字型大小可以另外設定,這樣同樣可以去除div父容器內img標籤底部的那條「白邊」。

這一方法也可以解決兩個inline-block元素之間出現空白間距的問題。

頁面效果如上面圖3。

解決 外邊距摺疊問題

當兩個元素垂直相鄰時,如果兩個元素分別向同一方向設定了各自的外邊距,那麼會產生合併,取其中最大正值。如果其中乙個元素是負的呢?答案 正值 負值 得 正值 如果兩個元素都是負值呢?答案 負值 負值 得 負值 總結 1.如果存在負值,會是減法 2.如果是正值,則直接取大值 博主建議 上面的了解一下就行,...

解決img標籤間距問題

關於img標籤間距問題 多個img之間有間距,包含img標籤的div之間有間距。如下 1 doctype html 2 3 4 5 testtitle 6 7 head 8 9 10 11 12 13 div 14 15 16 17 18 div 19 20 21 22 23 div 24 body...

img標籤預設有外邊距嗎 你知道css的盒模型嗎?

盒子模型 box modle 可以用來對元素進行布局,包括內邊距 padding 邊框 border 外邊距 margin 和實際內容 content 這幾個部分。標準盒模型中盒子的大小是指 content border padding margin。其中width指的是內容區域content的寬度...