[CSS]文字背景上下的寬度 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1

[CSS]文字背景上下的寬度

css

Zaku 2020-03-02 15:29:08 ‧ 1767 瀏覽

分享至

想詢問一下，文字背景上下方會產生一些空白的高度，有什麼方法可以設定嗎，如下圖紅線圈出的區塊:

Luke iT邦研究生 5 級 ‧ 2020-03-03 09:20:02 檢舉

字形就有的限制吧

窮嘶發發發 iT邦高手 1 級 ‧ 2020-03-04 10:55:23 檢舉

先 CSS RESET 之後再看要不要掛套板CSS例如 BOOTSTARP之類的
再看看會不會有留白，之後再調整，或是參考套板的說明調整

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

5 個回答

1

小魚

iT邦大師 1 級 ‧ 2020-03-02 15:49:47

基本上就是margin, padding, 陰影(看起來不像) 之類的,
F12研究看看.

回應 1
分享
檢舉

dragonH iT邦超人 5 級 ‧ 2020-03-02 16:00:05 檢舉

或者三個都不是

登入發表回應

2

dragonH

iT邦超人 5 級 ‧ 2020-03-02 16:00:39

應該是問這個

回應 11
分享
檢舉

看更多先前的回應...收起先前的回應...

Zaku iT邦新手 3 級 ‧ 2020-03-02 16:14:26 檢舉

試過，還是不行..，不知道是不是其他元素影響到

dragonH iT邦超人 5 級 ‧ 2020-03-02 16:34:00 檢舉

我也不知道

如果沒貼任何 code 的話

froce iT邦大師 1 級 ‧ 2020-03-02 17:14:21 檢舉

Zaku也是熟面孔了，怎麼連不貼code我們只能通靈都不知道...

小魚 iT邦大師 1 級 ‧ 2020-03-02 17:32:21 檢舉

有請葉大人出馬~
阿彌陀丸會幫忙去看錯誤訊息的.

Zaku iT邦新手 3 級 ‧ 2020-03-02 17:55:58 檢舉

@froce 居然被當成熟面孔了= ="a，結構太寬不方便貼，不然就貼了..

dragonH iT邦超人 5 級 ‧ 2020-03-02 18:00:44 檢舉

我只是想要知道你用什麼來裝 text XD

div 還是 span 還是純 text

既然 text 的問題可以解決的話

還有問題

那應該就是 parent 的 padding 或 margin 的鍋了

Zaku iT邦新手 3 級 ‧ 2020-03-02 18:15:45 檢舉

大概是這樣:
<div><span>test</span><span>test</span><div>

有放reset css所以不太準，預設應該很多拿掉了，玩了一下parent的div應該不太是

dragonH iT邦超人 5 級 ‧ 2020-03-02 18:24:37 檢舉

雖然有點硬改

不過看起來還可以

Zaku iT邦新手 3 級 ‧ 2020-03-02 18:37:54 檢舉

內外的line-height都試過，不行...

dragonH iT邦超人 5 級 ‧ 2020-03-02 21:36:34 檢舉

用 console 的 inspect 來看是哪裡的問題吧

咖咖拉 iT邦好手 1 級 ‧ 2020-03-03 21:58:51 檢舉

看了有點強迫症
硬是要上下一樣XD
https://codepen.io/ipphof/pen/RwPZZaX

登入發表回應

0

Pyan

iT邦研究生 5 級 ‧ 2020-03-02 16:58:33

反白後高度也要調整是嗎?

回應 1
分享
檢舉

Zaku iT邦新手 3 級 ‧ 2020-03-02 17:58:03 檢舉

需要操控那個多餘的空白，目前操作不到上下那個區塊，假設dragonH大大了案例，可以調到服貼文字或更低,更高之類的

登入發表回應

1

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2020-03-03 09:06:45

有些空白是字型本身存在的空白。那是無解的。

所以，我教你一招以前我常用的招。
搭配css的定位後，再用top、left跟高度來調整就行了。
top或left給他負值就會往上調整。

這樣可以服服貼貼了。

回應
分享
檢舉

登入發表回應

0

majo2013

iT邦新手 4 級 ‧ 2020-03-11 11:36:43

同意浩瀚星空所說的無解

網頁畢竟和平面設計不一樣

建議你先釐清下面這兩個觀念，再來想想可以怎麼做可以比較貼近你的需求
https://pjchender.blogspot.com/2015/03/csspaddingmargin.html
http://www.how-ocr-works.com/images/resolution.html

~~真相只有一個，但做法不是只有一個~~

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙