letter spacing屬性對居中的影響

2022-09-18 23:21:10 字數 909 閱讀 4051

轉,

在設計乙個網頁的時候,有時候為了讓頁面的可讀性更好,更加美觀;就會使用到letter-spacing屬性;

letter-spacing屬性是增加(值為正)或減少(值為負)字元間距;

也就是說當應用在英文是,就是增加或減少每個字母之間的間距,在中文文字中應用就是每個文字之間的間距;

然後我就遇到了問題:

第一種:當我給某個元素增加了間距letter-spacing之後,該元素最後乙個字元後面依然存在letter-spacing的值,導致整個元素變大,以至於居中的效果被破壞;例如:

原始間距:

這是一段文字

當我增加了間距後:

這是一段文字

很明顯就影響了後面的元素

這個問題的解決方法就是增加padding(padding-left/padding-right)值,讓其值大小等於letter-spacing的值;此例就是增加padding-left,就解決了問題;

這是一段文字

第二種:當給按鈕裡面的文字新增letter-spacing時,就會有所不同;

當給按鈕裡面的文字增加間距時,同樣最後乙個字元後面會有留白,而且可氣的是用改變padding的方法無法很好的解決這個問題(如果用改變padding值的方法解決;我們需要通過計算;因為設定的值並不是對應的letter-spacing的值,按鈕裡面的文字本身與按鈕邊緣有預設的padding值,一般是6px(google),假如我們設定letter-spacing為10px,按鈕的padding-right此時就是16px,而左側原來的padding-left會被我們設定的值覆蓋,那麼就為10px,此時按鈕文字就不居中了);

那麼為了不必要的這種計算,我們可以針對按鈕文字有另乙個方法,設定text-indent值,大小等於letter-spacing;

text-indent屬性規定文字塊中首行文字縮排;

CSS屬性 背景屬性 or 浮動屬性

background color red background image url background repeat no repeat repeat repeat x repeat y background position 水平位置 垂直位置 可以給負值 background attachme...

復合屬性 列表屬性 文字屬性

background 復合屬性 url 位址 本地位址,網路位址 repeat 預設值 水平和垂直都鋪滿 repeat x 只鋪滿水平方向 左右 repeat y 只鋪滿垂直方向 上下 no repeat 不平鋪 放不滿,留出空白 background size 100 100 背景縮放 boxba...

CSS屬性 文字屬性 or 列表屬性

font weight bolder 更粗的 bold 加粗 normal 常規 lighter 細的 font weight 100 900 100 500 不加粗 600 900 加粗 常用 100 細體 400 正常 700 加粗 900 更粗 font style italic 傾斜字 ob...