Re: 伸縮容器 'space-around' 裡兩邊與中間的空白差異

我發現這個問題在 www-style 上討論過兩次,提供一下連結:[1][2]

(12/07/18 13:43), Hawkeyes Wind wrote:
> space-around的定义恐怕是为了算法上偷懒才这么设计的吧。
> 在一个宽度1000px的行中,若存在3个box,宽度分别为200px,200px,300px,那
> 么空余的宽度为300px。
> 在宽度这个方向上,每个box有两条边,那么每条边与相邻元素的距离应为
> 300px/6=50px。
> 为了和margin做出区别,box的宽度在计算的时候包括了间距,于是box与父元素边
> 缘的间距为50px,而两个box之间的距离变成了双倍 的100px。
> 
> 以上是我猜的。

我覺得「box的宽度在计算的时候包括了间距」不太對,因為布局上沒什麼必要這
樣做。

然後就簡單的角度來講,300px/(3*2) 絕對不會比 300px(3+1) 的計算來得簡單,
所以我不覺得就實作的角度來講這有什麼差。'space-around' 應該要是一個比較
常用的情形。

> 不过我个人还是觉得box到父元素边缘等于box间距离比较好看些。

在之間的討論中,很有意思的是,要求 'space-around' 的人是要求你這個行為
的,但是他附的圖[3]卻是現在規範的「中間兩倍間隔」的行為。我本來也直觀覺
得不要這樣比較好看,不過我也發現,比如說 Mac 的 Finder 的圖示配置也是
「中間兩倍間隔」[4],另外我的 Nokia 手機的圖示也是。

我覺得這裡需要一些圖來佐證一下「box到父元素边缘等于box间距离比较好看」,
不然很容易掉到文字錯覺陷阱裡。

[1] http://lists.w3.org/Archives/Public/www-style/2012Jan/thread#msg170
[2] http://lists.w3.org/Archives/Public/www-style/2012May/thread#msg554
[3] http://terrainformatica.com/w3/eq-distr-buttons.png (圖示的配置)
[4]
http://lists.w3.org/Archives/Public/www-archive/2012Jul/att-0028/mac-finder


以上

Kenny

Received on Wednesday, 25 July 2012 19:37:56 UTC