5種方法快速去掉HTML中Inline-Block的空白

2020-03-24 16:50:44

字體：大中小

來源：轉載

供稿：網友

當需要在 inline 元素上控制margin和padding時，inline-block屬性值變得非常有用，有了它，你不在需要讓這些元素去 block 和 float 。但有一個問題，當使用inline-block時，html' target='_blank'>HTML元素之間的空白會顯示在頁面上。很討厭。有幾種方法可以除去這些空白；其中一個非常巧妙。方法1：各元素間不留任何空白一個100%能解決這個問題的方法是在你的HTML代碼里元素間不留任何空白：CSS Code復制內容到剪貼板
當然，這樣看起來很亂，讓代碼不好維護，但很實用，很直觀，更重要的很可靠。方法2：在父元素上設置font-size: 0解決這個空白問題最好的方案是在這些inline-block元素的父元素上設置font-size: 0。如果你的 UL 里有inline-block的 LI ，那你可以這樣做：XML/HTML Code復制內容到剪貼板
.inline-block-list{/*ulorolwiththisclass*/ font-size:0; } .inline-block-listli{ font-size:14px;/*putthefont-sizeback*/ }
為了不讓父元素的字體大小影響子元素，你需要重新在子元素上設置font-size值，這通常很簡單。唯一可能遇到麻煩的情況是你用相對大小設置字體。但大多數時候，這樣的方法能解決你的問題。方法3：HTML注釋這種方法有點暴力，但同樣能奏效。將HTML元素間用注釋填充，這跟它們之間沒有空白效果一樣：XML/HTML Code復制內容到剪貼板
li Itemcontent /li !-- -- li Itemcontent /li !-- -- li Itemcontent /li /ul
用一個詞惡心。用兩個詞非常惡心。用三個詞 .OK，你明白。但這確實管用！方法4：負邊距跟方法2很相似，抱歉。你可以利用inline-block的靈活性，給它們設置一個負邊距，隱藏空白：XML/HTML Code復制內容到剪貼板
這種方法最不推薦，因為你必須考慮到各種情況，有時候會出現一些無法預料的空白。最好不用這招。方法5：首尾接龍另外一個利用HTML標記的方法是將元素的閉合標記和下一個元素的開始標記靠在一起：XML/HTML Code復制內容到剪貼板
并不像HTML注釋那樣丑陋，但我寧愿手工刪除那些空白，而不考慮代碼的可讀性。沒有一個方法是非常理想的，但在網頁中不留空白也是一個爛方法。這并不是在警告你不要使用inline-block，inline-block仍然是非常的有用，只是在使用你要明白如何處理里面出現的空白。以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持phpstudy。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5 Canvas繪制五星紅旗

下一篇：html中code標簽和pre標簽詳解