Skip to content

Zeroplex 生活隨筆

軟體開發、伺服器和生活瑣事

小 縮小字型大小。 中 重設字型大小。 大 放大字型大小。

CSS width in box module

Posted on 2010 年 2 月 14 日2021 年 3 月 12 日 By 日落 在〈CSS width in box module〉中有 3 則留言

今天遇到的鳥問題:CSS 中真正的 width 要等於 margin + border + padding + 設定的 width。

假設原本的 DIV 設定如下:

.box {
   width: 800px;
}

若要讓原本的區塊寬度不變但要加上 20px 的 padding 必須這樣設定:

.box-padding {
   padding-left: 20px;
   padding-right: 20px;
   width: 760px; /* 800 - 20 - 20 = 760 */
}
Tags:網頁設計

文章導覽

Previous Post: 新年快樂
Next Post: LESS make less code to CSS

Comments (3) on “CSS width in box module”

  1. 【J】表示:
    2010 年 2 月 15 日08:08

    你可以試試 LESS。

    http://lesscss.org/

    我沒試過,你試看看:P

    回覆
  2. 日落 Zero表示:
    2010 年 2 月 15 日17:28

    LESS 感覺超威的! 0.0+

    回覆
  3. 日落 Zero表示:
    2012 年 6 月 1 日06:05

    現在有 Compass 了!

    回覆

發佈回覆給「【J】」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


其他

關於我  (About me)

小額贊助

  文章 RSS Feed

  留言 RSS Feed

Apache AWS Bash C/C++ Docker FreeBSD GCP Git Google Java JavaScript Laravel Linux Microsoft MSSQL MySQL Nginx PHP PHPUnit PostgreSQL Python Qt Ubuntu Unix Vim Web Windows WordPress XD 作業系統 分享 好站推薦 專題 攝影 新奇搞笑 新聞 旅遊 生活雜記 程式設計 網路架站 網頁設計 資訊學習 資訊安全 遊戲 音樂


創用 CC 授權條款
本著作係採用創用 CC 姓名標示-相同方式分享 4.0 國際 授權條款授權.