如何去除內聯元素(inline-block元素)之間的間距
下面總結了幾條去除inline元素和inline-block元素去除間距的方法:
1.在寫代碼的時候,直接把行內元素的代碼寫在一行上,不分行的話,就不會出現這種情況了.但是缺點是代碼不優雅了,但是的確保證了原汁原味的代碼安排.
網絡搜素的意見:可以在html中直接把元素寫在一行上或把閉合標簽和第二個開始標簽寫在一行或兩行間添加注釋或直接去掉閉合標簽但最后一個不能去掉。
錯誤的一個粗暴做法.在父級的設計上,使用font-size:0px;我發現局部上是可以的.因為我的代碼是盒子的布局.但是比較有局限性,如果盒子里有文字,就不行了..
2、設置margin-right為負值,但要考慮上下文的字體和文字大小。
3、先設定子元素字體,再設置父元素font-size:0px;////chrome中:-webkit-text-size-adjust:none;
4、設置父元素letter-spacing或word-spacing為負值,要考慮字體,子元素有文字也要注意設置letter-spacing或word-spacing的值。
以下是我測試居中布局時的代碼.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:0px; padding: 0px; } body{ text-align: center; /*font-size:0.1px;*/ } .block{ /*w200*/ width: 200px; height: 200px; width: 400px; background: red; display: inline-block; /* letter-spacing:0px; word-spacing: 0px;*/ } </style> </head> <body> <!-- .box>.block*3 Tab 就會自動出來--> <div class="box"> <div class="block">文字會不會繼承呢?</div><div class="block"></div><div class="block"></div> </div> </body> </html>
5.float:left;