網頁版型控制不能不知道的事!區塊與行內元素、盒模型與容器

繼上一篇 網頁樣式跟想像中不一樣,你 CSS Reset 了嗎? 說明了 CSS Reset 造成網頁排版不如預期的因素,其實還有許多因素都會影響網頁上的排版,今天就來了解這些因素,來掌握版型控制技巧!

區塊元素與行內元素

  • 區塊元素(display: block;
    • 寬度會盡量佔滿整個版面,並依照父元素寬度自適應延伸佔滿
    • 會另起一行來進行呈現
    • Ex. div、h1、ul、li、p
  • 行內元素(display: inline;
    • 文字多寬元素就多寬
    • Ex. a、span

如何分辨是區塊元素還是行內元素

  • 利用 Chrome 開發者工具選取該標籤,看是否盡量佔滿整個版面

    • 盡量佔滿了整個版面:區塊元素

      區塊元素會盡量佔滿整個版面

    • 並沒有佔滿整個版面:行內元素

      行內元素並沒有盡可能佔滿整個版面

  • 使用背景色並設定 width 且寬度設定有作用,儘管背景色沒有佔滿整個版面,但是仍然會另起一行

    區塊元素會另起一行

  • 使用背景色,若往右滿版即是區塊元素,剛好等於文字寬度則為行內元素,在這個狀況設定 width 也沒效

    利用背景顏色觀察是區塊元素還是行內元素

box-model 盒模型

padding 與 margin 推擠

  • padding 內距,指區塊距離裡面內容的距離
    • 會影響區塊的寬高
  • margin 外距,指區塊距離前後區塊或是標籤的距離
    • 計算區塊寬高時不會包含 margin
    • 但是該區塊增加 margin 後會影響在畫面中的占比

margin 不會被算在 size,但確實會影響在畫面中佔比

margin-bottom 推擠

這邊稍微說明一下 margin-bottom 推擠,以下面範例為例:

  • 這個 .box,裡面我放置了 p 段落以及 a 標籤鏈結,我在 p 段落設定了一個 margin-bottom: 8px;,因此 p 段落與 Link 中間隔了 8px,整體 .box 高度為 80px。

    在 .box 內的 p 段落增加底部外距,高度因此增加 8px

  • 接下來我將原本放置在 p 斷落的 margin-bottom: 8px; 移到 a 標籤,卻發現:.box 整體高度只有 72px,少了那 8px!

    因為是在 .box 最後一個 a 標籤增加底部外距,所以高度不會因此增加 8px

原因為何?

當 .box 本身與該區塊最後的標籤若都有設定 margin-bottom,將會以這兩個值較大的值,來當作 .box 向下推擠的值。

也因此,.box 內最後一個標籤 p 段落,就自然也會被視為是 .box 本身區塊向下推擠多少的候選之一;因為 margin 本身不會算在區塊本身寬高數值裡,所以照上述範例,.box 整體高度就不會再加上那 8px 了!

關於詳細的 padding 與 margin 介紹,我之後會再發一篇文章來詳述(學 YouTuber 來挖坑了 XD)

box-sizing: border-box;

預設來說,若元素增加 padding 以及 border,都會影響元素的寬高。以下方範例為例:

1
2
3
4
width: 50px;
height: 50px;
padding-top:10px;
border: 2px solid black;
  • 寬度為:50px + 2px * 2 = 54px
    • width + 左右兩邊 border
  • 高度為:50px + 10px + 2px * 2 = 64px
    • width + padding-top + 上下兩邊 border

但若增加了 box-sizing: border-box;,區塊的寬高將會等於 width 以及 height 設置值;至於 padding 以及 border 所占面積則會往內推擠,壓縮區塊內容區域。

所以依照上述說明,範例寬高都將會是 50px。

行距 line-height

行距是指一行文字上下距離,舉例 Word 行高來講,就有分固定行高、1.5 倍行高等等,而網頁就是透過 line-height 來控制行距。

以下提供幾個範例:(文字大小皆為16px)

  • 1 行文字、行距 16px:高度為 16px
  • 1 行文字、行距 24px:高度為 24px
  • 2 行文字、行距 24px:高度為 48px
  • 2 行文字、行距 0 px:高度為 0px(你沒看錯!因為文字會通通擠在一起 XD)

從以上範例就可以知道,影響一行高度的並不是字體大小,而是行距。

暗藏玄機的圖片底部 - 多出的 2px ~ 3px

網頁排版時會發現 <img> 圖片底部會多出 2px ~ 3px 的空隙,如果要解決此問題,可以透過以下 CSS 語法的兩段語法二選一使用,兩種語法都可以解決這個問題。

1
2
3
4
5
/* 以下兩種方法選一種即可 */
img {
display: block; /* 方法一 */
vertical-align: middle; /* 方法二 */
}

高度 height 該設定?不設定?

一般來講,我們不會去特別針對區塊高度去做設定,因為內容的文字行數不一定,若今天高度僅設置 50px,但卻有 10 行行距 16px 的文字,塞不下的文字就會超出區塊範圍,很容易造成跑版。

所以一般來講,區塊的高度會用以下方式推擠並產生影響,而不會設定高度:

  • padding 內距
  • border 框線
  • line-height 行距

什麼時候可以設定高度?

  • 針對圖片時可以設定其高度。

容器與滿版式設計

  • 網站上每一個區塊,都是由一個容器所包圍
  • .container.wrapper 皆可是容器縮寫

滿版式設計

蝦皮購物 為例,若想達到像他們整體區塊置中、header 有滿版背景色但也同時保有區塊置中的效果,可參考以下寫法:(不代表蝦皮購物也是這麼寫的)

HTML

1
2
3
4
5
6
7
8
9
<div class="header">
<div class="container">
內容
</div>
</div>

<div class="container">
內容
</div>

CSS

1
2
3
4
5
6
7
8
9
.header {
background-color: orange;
color: white;
}

.container {
width: 1200px;
margin: 0 auto;
}

解釋與注意事項

  • header 區域是透過 header 的滿版與及其設定的背景色,內放置 container 達成內容區塊置中效果
  • 若是 container 區塊包在 header 外或是放在同一 div,header 設定將會受制於 container 大小
    • Ex. header 最大僅 1200px,無法達成滿版效果
  • 若要設計滿版效果,不要設計成 width:1920px;,若設計稿上這樣寫,是在示意滿版
    • 如果螢幕寬度大於 1920px,就不會是滿版囉 XD

結語

網頁排版是項博大精深的學問,且參雜許多的規則與感到莫名其妙的狀況(?而且同一個版型,每一次切版卻也都有不同的狀況。

篇幅關係所以大概敘述一下,有機會在好好詳細研究一下!


希望我的文章能夠幫助到你,有任何問題或是想與我討論交流,歡迎透過留言與我分享你的觀點。

如果你喜歡我的文章,想支持我繼續撰寫更多文章,歡迎你:

  1. 將我的部落格加入書籤,隨時造訪部落格。
  2. 將我的文章分享給你的親朋好友。
  3. 透過 LikeButton 幫我按 5 下讚。
  4. 每月贊助 LikeCoin 請我喝杯咖啡。(雖然我不喝咖啡啦 XD)