p標籤換行導致的問題

2021-08-14 13:42:57 字數 599 閱讀 9169

.p5
上面是css

下面是html

培養一流的人才,鑄造一流的工程,實現員工與企業的共同發展

這樣寫之後,出現的問題是,img的出現在p標籤的上面,如下圖所示,這是為什麼呢?

灰色部分的是,因為p標籤是塊狀元素,本來應該出現在第二行文字的下面,但是,卻出現在了第二行文字的上面,經過分析,因為我給p標籤的樣式設定了寬度24px和高度,設定的行高也是24px,又因為p標籤是塊狀元素,雖然,在視覺上看起來因為p標籤放不下那麼多的字而換行,但,實際上,p標籤的所佔的空間就是由給他設定的寬度和高度組成的地方,所以,img標籤認為第一行文字下面就是一片空的地方,他可以使用這塊地方,所以,就出現在第二行字的上面了

由此看來,當我們使用p標籤的時候,如果設定了行高的話,我們可以不用設定p標籤的高度,因為p是塊狀元素,他的高度會由他的內容撐起來,所以,我在上面給p標籤設定高度就是畫蛇添足,不僅沒有任何好的作用,還帶來了麻煩。

同理可得,塊狀元素應該都這樣處理

html span標籤 不換行 字元換行問題

html span標籤 不換行 有時span帶中文時候是可以自動換行的 加上樣式 style display inline block width 60 word wrap break word white space normal 是因為 span 不是塊狀元素。本身自帶有 左浮動的效果,並且連續...

2020 12 31 p標籤控制換行的位置的方法

p標籤可以控制換行的位置 word wrap 兩個值 word wrap break word 允許長單詞換行到下一行 即當你每行剩餘的位置不夠存放乙個長單詞的時候,這個長單詞將會換到下一行裡面 word wrap normal 瀏覽器的預設行為 只在允許的斷字點換行 就像w3c的例子 只在文字裡面...

css裡面的span和p標籤的換行或者不換行問題

有的地方想換行,半天換不了,有的不想換行,又自己動換行。坑 word break normal white space pre wrap word wrap break word overflow hidden overflow wrap break word 新版替代word wrap text ...