【酷哥報報】搞不定網路中心的“行內區塊”~ 為什麼我加總100%的行內區塊還是會偷跑到行外？_不懂網路中心的小夥伴勿進 @ 酷哥的想像天地~部落格

【酷哥報報】搞不定網路中心的“行內區塊”~ 為什麼我加總100%的行內區塊還是會偷跑到行外？_不懂網路中心的小夥伴勿進

小夥伴在網路中心編輯響應式網頁時，會不會遇到搞不定“行內區塊”的窘境？如圖一，在編輯畫面中看到整齊完美的“行內區塊”排列，左(30%)、中(40%)、右(30%)。完美的比例，加總100%，不管畫面多大多小這三個區塊永遠都會依照30%、40%、30%的比例來顯示。

(圖一在網路中心的網頁編輯畫面中看到的“行內區塊”排列)

但是發佈之後打開網頁看。整個就變調了。如圖二本來擺得整齊完美的“行內區塊”居然偷跑到行外，跳到第二行去了。不是加總100%嗎？為什麼你要跑到外面，外面有什麼吸引你的花花草草，為什麼不安份的呆在完美的行內？

(圖二發佈後打開網頁看到變調的“行內區塊”排列)

小夥伴們遇到這樣的問題會如何解決？

說在前面，這裡不會一個步驟一個步驟的教小夥伴從哪裡設定“行內區塊”(inline block)，不曉得網路中心的基本操作的小夥伴要自行從基本開始學習。酷哥也不是網路中心的技術高手，如果方法太笨請高手指教，但是千萬不要扯笑。

酷哥是這樣解決問題的，首先請仔細的去比較一下(圖一)跟(圖二)，小夥伴是不是會發現，在圖二中，黃色的背景區塊跟綠色的背景區塊中有一點點的間距？這個間距在圖一中是沒有的。所以小夥伴就會想是不是margin(邊距)的問題，可是使用過網路中心的小夥伴應該知道在網路中心中的區塊內定的margin(邊距)都是0。那還有什麼會造成這樣的問題呢？會不會是border(邊界)的問題呢？再打開網路中心的屬性，邊界的頁籤，你會發現內定的邊界也是0。天啊，都沒給它任何邊界跟邊距的數值了，為什麼它還是硬要產生小間距，讓我的加總100%的“行內區塊”失效？

這裡就讓酷哥給小夥伴們一個小撇步，如圖三，在這些“行內區塊”的父層裡，再強調一次是父層中的文字頁籤，將“預設”的文字大小設定為0。你將會發現，發佈後再開網頁來看，如圖四你的“行內區塊”之間的小間距就不見了，區塊就乖乖的聽話，不再偷跑，跳行了。