程式設計雜筆

[程設雜筆] 了解一排span之間的神祕間格是什麼

今天在寫css和javascript的時候遇到一個很大的問題。當我先寫好html如下的時候

<div class="colorPicker colorList">
     <span class="color" title="紅" style="background-color: rgb(255,0,0)"></span>
     <span class="color" title="橙" style="background-color: rgb(255,128,0)"></span>
     <span class="color" title="黃" style="background-color: rgb(255,255,0)"></span>
</div>

以及先寫一些

 <div class="colorPicker colorList">
      <span class="color" title="紅" style="background-color: rgb(255,0,0)"></span>
 </div>

再用jQuery append 橙和黃

$(this).clone().appendTo('#choosed-color');

這兩種顯示的樣式竟然不太一樣!

第一種長下面的樣子,第二種則是上面的樣子:

css_appendTo

可以明顯看出,格子之間的間距不太一樣(比較細的間距是我另外設色塊本身的margin,因此比較粗的是神祕的間格加上色塊本身的margin)

把chrome的console開起來,一一比對CSS和html,完全一模一樣,見鬼了。大概想了一個多小時,又查了很多資料,終於找到為什麼了。第一種方法會有額外的間格是因為html裡的換行。而第二種會如此因為span本身CSS預設

display:inline

這個特性會自動把前後的span連在一起,變成同一行,也就沒有原本的換行字元。

因此解決的方法就是在加一行程式碼:

<span style="color: #ff0000;">$('#choosed-color').append('\n');</span>
$(this).clone().appendTo('#choosed-color');

冏,為了這個小小的東西,多花了我一個多小時……

參考資料:

http://bbs.csdn.net/topics/390365204

http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s