底部留白問題導致排版混亂

2021-10-10 04:51:57 字數 1390 閱讀 8253

img底部留白問題

>

>

charset

="utf-8"

>

>

title

>

type

="text/css"

>

*.box

.box h2

.box h2 a

.box h2 a:hover

.box .banner

.box .banner a

.box .banner a .tit

.box .banner a:hover .tit

.box .banner a:hover span

.box .list

.box .list li

.box .list li a

.box .list li a:hover

style

>

head

>

>

class

="box"

>

>

href

="##"

>

部落格a>

走進中世紀古城div

>

a>

div>

class

="list"

>

>

href

="##"

>

極簡主義「一人食」 黃瓜蝦仁三明治a

>

li>

>

href

="##"

>

不用和面輕鬆做出的小甜點a

>

li>

ul>

div>

body

>

html

>

問題如下:

2.分析:由於img是行內塊元素,會和文字的基線對齊,此時會造成父盒子的底部留白(留白的距離會隨著字型的大小變化而變化)。**如下:

所以要解決這個問題,只需要將img轉換為block就可以了。在css中新增如下**,

img
最終效果如下

微信小程式 寬度留白問題

先看一下問題 其實要解決這個問題我們首先要從盒模型說起 在前端中,盒模型包括 content padding border margin 這是我從網上找的乙個圖,很形象的解釋了盒模型。我在這裡也簡單解釋下盒模型的每個部分的概念。content content就像英文名一樣,意思為內容。我們經常設定的...

關於img 底部留白的問題

首先我們需要了解的一些問題 1.img 元素是行內元素 儘管有時候表現的像行內塊級元素 2.vertical align 屬性是設定元素的垂直對齊方式 定義了行內元素的基線 baseline相對於該元素所在行的基線的垂直對齊 vertical align的預設值為baseline,元素放置在父元素的...

web解決高度塌陷問題(排版 結構混亂問題)

在web設計中,對於初學者高度塌陷時常見的問題,高度塌陷對於我們這種小白來說實際上就是結構混亂 重疊等 解決方案有兩個 bfc方案 方式缺陷 設定浮動元素 會導致父元素的寬度丟失,且下方同級元素也會上移 設定元素的絕對定位 暫不確定 設定display inline block 對導致父類的寬度丟失...