iT邦幫忙

1

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

css
Zaku 2020-03-02 15:29:081682 瀏覽

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

https://ithelp.ithome.com.tw/upload/images/20200302/201027095ZU0mY2CX4.png

Luke iT邦研究生 5 級 ‧ 2020-03-03 09:20:02 檢舉
字形就有的限制吧
先 CSS RESET 之後再看要不要掛 套板CSS例如 BOOTSTARP之類的
再看看會不會有留白,之後再調整,或是參考套板的說明調整
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
小魚
iT邦大師 1 級 ‧ 2020-03-02 15:49:47

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

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

或者三個都不是/images/emoticon/emoticon01.gif

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

應該是問這個

codepen

看更多先前的回應...收起先前的回應...
Zaku iT邦新手 3 級 ‧ 2020-03-02 16:14:26 檢舉

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

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

我也不知道

如果沒貼任何 code 的話

/images/emoticon/emoticon48.gif

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 的 paddingmargin 的鍋了

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

codepen

雖然有點硬改

不過看起來還可以

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

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

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

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

1

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

所以,我教你一招以前我常用的招。
搭配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

真相只有一個,但做法不是只有一個

我要發表回答

立即登入回答