一樣是關於文章內文部份,同樣的語法,為什麼文章的對齊方式卻不同?

※ 圖一


後來才發現是打文章時的語法不同所造成的,當分段是用 <p></p> 的時候,文章會對齊到最前面,看起來較不好看,但是是用 <br/> 來分段的話,就會依原本CSS所寫的語法對齊,較為好看。至於為什麼會造成不同,我不知道,照理說不應該會這樣,原本的CSS應該會壓過去才是吧!

之前在文章右下角放圖的時候,一樣的語法也會造成不同的效果(如下圖)。

※ 圖二


有的圖好像在跟文章文字overlap 的時候會被文字的白背景蓋過去,造成圖片部分空白,不好看,有些卻可以成功的和文字overlap 形成效果。後來發現 <p></p> 和 <br/> 跟文章對齊關係的秘密後,以為也是同樣的原因造成的,於是加了背景試試看(圖一),結果發現不是,不管是 <p></p> 還是 <br/> ,圖都不會被蓋掉,每篇文章的背景圖都好好的跟文字overlap,那到底是什麼原因造成圖二中的背景圖被蓋掉呢?

圖一的CSS語法:

.mainEntry {
padding: 10px 20px;
text-align: left;
background-image: url('圖片網址');
background-repeat: no-repeat;
background-position: 100% 90%;
}


圖二的語法:

.mainEntry {
margin: 5px 20px 10px 25px;
text-align: left;
background-image: url('圖片網址');
background-repeat: no-repeat;
background-position: 100% 90%;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 10px;
}











創作者介紹

min'cellanea

minc 發表在 痞客邦 PIXNET 留言(0) 人氣()