“空(kōng)格”屬于一(yε¶ī)類細節，很(hěn)容易被忽略，但(dàn)又(yòu)比較影(yǐn☆↑"©g)響效果，更麻煩是(shì)很(hěn)不(bù)好(hǎo)控制(zh¶Ω>ì)。相(xiàng)信認真做(zuò)過網頁•≤設計(jì)（Web Design），或者關注過頁面設εσ×計(jì)的(de)同行(xíng)都(dōu)對(duì)&lα♥γ₽dquo;空(kōng)格”"★★不(bù)陌生(shēng)。
“空(kōng)格”後效果會(huì)提升，但(dà←✔n)不(bù)能(néng)完全解決問(wèn)題，有(≤®yǒu)利有(yǒu)弊。既然效果并不(bù)十分(f↕&•&ēn)理(lǐ)想，再綜合工(gōng)作¥π(zuò)量、可(kě)維護性而言實在有(yǒu)限。或者更悲β↑'♦觀的(de)認為(wèi)，要(yào)想達到(dào)完美(měi)的(d↓"¥e)效果，必須手動調整，沒有(yǒu)完美(měi× λ∏)的(de)可(kě)控程序邏輯。道(dào)理(lǐ)如(rú€β")同圖書(shū)排版，真正排版出色的(de)好(hǎo)書(shū↕π)，都(dōu)是(shì)一(yī)頁頁手工(gōng)定制(zh£ αì)的(de)，排版效果必須跟著(zhe)↑ 內(nèi)容走。 這(zhè)個(gè)問(wèn)題在專業✔≈€(yè)網頁設計(jì)上(shàng)講，可(kě)歸類于“>→內(nèi)容排版”，與用(yòng)戶體(βεtǐ)驗中“可(kě)讀(dú)性&r↓₩dquo;直接相(xiàng)關。平面設計(jì)裡(lǐ ↔)好(hǎo)像叫“字體(tǐ)排印”，同樣應該用(™¶yòng)“可(kě)讀(dú)性”指标來(∑•lái)衡量質量。但(dàn)受限于網頁構成原理(lǐ)，在網頁<§'ε中，空(kōng)格影(yǐng)響的(de)不(bù)僅₹↔有(yǒu)“內(nèi)容↓→排版”，還(hái)有(yǒu"∏$)“頁面版式”問(wèn)題也(yě)很₩∞γ≤(hěn)典型。“內(nèi)容排版”•∑€主要(yào)指內(nèi)容層面，“頁面版式”主要 ×(yào)指結構層面，下(xià)邊分(fēn)開(kāi)來(lái)討™&✔♠(tǎo)論。
1.內(nèi)容排版的(de)空(kōng)格
目前互聯網上(shàng)內(nèi)容裡(lǐ)，中英文(wλ€↕én)混雜(zá)已經非常普遍，并且可( ₽kě)以放(fàng)大(dà)理(lǐ)解為(wèi)&l∞→dquo;中西(xī)文(wén)混排（自(zì)己基本₩∞ 隻用(yòng)英文(wén)，所以後續都π€©"(dōu)寫“中英文(wén)混排&rdqu o;）”。不(bù)僅僅是(shì)英文(wén)單詞的(de)α£使用(yòng)，各種英文(wén)術(shùσ✘)語和(hé)縮寫已經完全融入了(le)普通(tōng)人(rén)生(shē✘€ng)活。尤其在信息爆炸的(de)互聯網上(shàng)，此問(wèn)題表現☆₹(xiàn)的(de)比較突出。
在一(yī)些(xiē)很(hěn)專業(yè)的(de)網站(zh÷ γ÷àn)上(shàng)，有(yǒu)中文(wén)、英文(wén)↑§ ∑之間(jiān)加空(kōng)格的(de)說(shuō)法，尤其翻≈φ♣$譯過來(lái)的(de)技(jì)術(shù✘₩∑←)參考裡(lǐ)。很(hěn)容易想到(dào)，這(zhè)₹δ種寫法是(shì)為(wèi)了(le)更好(hǎo)的(de)區(qū)₽β别不(bù)同語言，以免造成閱讀(dú)上(shàng)的(de)&γ♥ ldquo;粘連”障礙，加空(kōng)格後确實極大(dà)≤≤提升了(le)“可(kě)讀(dú)性”。
同時(shí)發現(xiàn)，影(yǐng)響“ 中英文(wén)混排”效果的(de)原因其<&ε實很(hěn)多(duō)，在網頁設計(jì)中不(bù)僅 Ω↓僅隻有(yǒu)“加空(kōng)格&₹©rdquo;手段來(lái)優化(huà)。比如(rú)更改字體(tǐπφ×)，因為(wèi)在計(jì)算(suàn)機(©♥jī)系統裡(lǐ)英文(wén)的(de)σ£✘選擇其實很(hěn)多(duō)，不(bù)比中文(wén)&ld quo;宋體(tǐ)”的(de)σ÷↓單調。不(bù)同的(de)英文(wén)字體₩®✘(tǐ)，不(bù)僅對(duì)比中文(wén)的γ↑±γ(de)大(dà)小(xiǎo)比例不(bù)一(≠ε&yī)樣，而且前後粘連的(de)距離(lí)也(yě)不★₽(bù)一(yī)樣。
2.頁面版式的(de)空(kōng)格
結構層面的(de)空(kōng)格主要(yào)在HTMΩ₹>L結構代碼裡(lǐ)，很(hěn)多(duō)時(shí)候我們需要(yàoσ♣ )針對(duì)不(bù)同标記的(de)內("σ<nèi)容做(zuò)間(jiān)隔。之前大( ← dà)多(duō)數(shù)人(rén)的(de)做(zuò)法，都(dō₩ u)是(shì)自(zì)然空(kōng)格，就(jiù)是(shì)™↓Ω在HTML代碼裡(lǐ)敲入一(yī)個(gè)空(kōng)格。但( ≠Ωdàn)後來(lái)發現(xiàn)，第一(yī)不(bù)易做(zuò)像<♠✔素級的(de)精确控制(zhì)，第二不(bù)同客戶端下(xià)的(→εde)空(kōng)格寬度解析不(bù)一σα•(yī)緻，這(zhè)在做(zuò)跨浏覽器(₩αqì)兼容時(shí)很(hěn)重要(yào)。其實，代碼裡(lǐ)做← (zuò)空(kōng)格不(bù)符合“結構、表現∏πφ(xiàn)”分(fēn)離(lí)的(de)原則。應該把所有(y↑☆ǒu)需要(yào)“空(kōngΩ≤)格”效果的(de)內(nèi)容€π>$全部用(yòng)CSS的(de)margin定義解決∏♣，想空(kōng)就(jiù)空(kōng)，想空(kōng)多(du₽↓₹Ωō)少(shǎo)随時(shí)可(kě)以改。
通(tōng)常高(gāo)保真原型裡(lǐ)沒有(yǒu)的(de)空(kōα$ng)格，但(dàn)研發工(gōng)程師(shī)♦做(zuò)的(de)測試原型裡(lǐ)卻有(yǒu)。這(zhè±β↑)是(shì)因為(wèi)在客戶端代碼裡(lǐ)，換行(β<αxíng)就(jiù)算(suàn)一(yī)個(gè÷)空(kōng)格。工(gōng)程師(shī)在做(zuò)應用(yòn"↑φ✔g)層開(kāi)發時(shí)，往往不(bù)那(nàπλ)麽注意，通(tōng)常為(wèi)了(le)看(kàn♣§)代碼方便而随意空(kōng)行(xíng)。還£>πδ(hái)有(yǒu)類情況是(shì)可(kě)能(néng)使★✔€用(yòng)了(le)某種控件(jiàn)或者特殊語句，甚至還↑↔÷±(hái)有(yǒu)查不(bù)出來(lái)的(de)情π±€α況。