久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

千鋒教育-做有情懷、有良心、有品質的職業(yè)教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 前端inline元素間隙問題解決辦法

前端inline元素間隙問題解決辦法

來源:千鋒教育
發(fā)布人:小千
時間: 2021-02-08 09:00:00 1612746000

      一些剛剛入門學習web前端的小伙伴在剛剛接觸inline元素的時候,是不是會遇到這樣一個問題,兩個元素比如<span>中間總是有一個小間隙,無法去除掉,那么應該如何解決呢?

1

      當我們給span元素添加了內容時,兩個相鄰的span元素的文字之間有一個間隙

      問:那么這個間隙到底是什么呢?

      其實它是一個空格。

      問:那這個空格時怎么來的呢?

      首先先來看看我們平時的代碼書寫習慣吧

2

      我們是優(yōu)秀的程序猿,代碼要求格式要規(guī)范,所以我第二個span換行了

      而就是這個沒毛病的換行,讓兩個span差生了間隙。

3

      讓我們來看看怎么解決吧

      聰明的你靈機一動,將代碼寫一行撒

4

5

      這種方法最是簡單粗暴的解決了問題,但是粗暴的方式往往會造成很多不可控的因素,后期的很多場景中也有可能讓人崩潰,畢竟團隊合作開發(fā)項目是多人參與,對于要求代碼書寫規(guī)范的人來說,這樣的寫法簡直壓死強迫癥......(腦袋里面已經(jīng)有畫面了- -.)

      來看看第二種方法吧

      給父元素添加 font-size:0; 在給span額外添加font-size:;

6

      但這種方法也存在問題,先是font-size被重寫一次(First Blood),再者是一些老版本的瀏覽器下依舊會有間隙(Double Kill)或者有些瀏覽器對于font-size:12px;的支持不友好(Trible Kill)。

      大神的解決辦法:

      給span加上浮動,完美解決,哈哈哈滿上...

7

      學習web前端,可以參考千鋒web前端培訓班提供的web前端學習路線,該學習路線對從零基礎小白到web前端初級開發(fā)工程師,web前端高級開發(fā)工程師,后面的web前端大神級開發(fā)工程師都有一個明確清晰的指導,根據(jù)千鋒web前端培訓機構提供的web前端學習路線圖可以讓你對學習web前端開發(fā)需要掌握的知識有個清晰的了解,并快速入門web前端開發(fā)。想要獲取前端完整學習路線和免費的學習資料可以添加我們的web前端技術分享交流qq群:857920838  加群找群管理領取即可,等你來哦~~

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經(jīng)許可不得擅自轉載。
10年以上業(yè)內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT