inline-block要素の隙間

3642 ワード
inline-block
いくつかのinline-block要素、例えばbuttonは、HTMLに連続して書かれている場合、それらの間に隙間がないことができます.しかし、HTMLで分割フォーマットすると、それらの間に隙間があります.例:
<!DOCTYPE html>

<html>

<head>

<style type="text/css">

button {

  margin: 0;

  border: 1px solid gray;

}

</style>

</head>

<body>

<div>

<button>One</button><button>Two</button><button>Three</button>

</div>

<div>

<button>One</button>

<button>Two</button>

<button>Three</button>

</div>

</body>

</html>

この問題の解決方法は少なくないが、その中でよく使われているのはこの3種類である.二、ゼロfont-sizeを使用する.三、負のmarginを使用する.具体例は以下の通りです.
<!DOCTYPE html>

<html>

<head>

<style type="text/css">

div {

  margin: 10px;

}

button {

  margin: 0px;

  border: 1px solid gray;

}

#float-left button {

  float: left;

}

#zero-size {

  font-size: 0;

}

#zero-size button {

  font-size: 14px;

}

#negative-margin {

  font-size: 14px;

}

#negative-margin button {

  margin-left: -7px;

}

</style>

</head>

<body>

<div id="float-left">

<button>First</button>

<button>Second</button>

<button>Third</button>

</div>

<div id="zero-size">

<button>First</button>

<button>Second</button>

<button>Third</button>

</div>

<div id="negative-margin">

<button>First</button>

<button>Second</button>

<button>Third</button>

</div>

</body>

</html>

1つ目の方法はフローティングを使用します.その欠点は、親要素を直接中央に表示することができず、中央に配置するには外部でdivをさらに包むしかないということです.2つ目の方法は、親要素のfont-sizeを0に設定します.Androidのブラウザに問題があり、サブ要素のフォントがemまたはスケール長では使用できないという欠点があります.最後の方法は負のmarginを使用し、この負のmargin-left値は親要素のフォントサイズに関係し、一般的にはフォントサイズの半分であるが、その信頼性は疑いの余地があり、例えばIE 6とIE 7では間違っている.
上記のいくつかの方法では,負のmargin‐leftを増加させることによって,隣接要素のborderを重ね合わせることもでき,ボタン群という効果を得ることができる.例:
button {

  margin: 0px;

  border: 1px solid gray;

}

#float-left button {

  float: left;

  margin-left: -1px;

}

#zero-size {

  font-size: 0;

}

#zero-size button {

  font-size: 14px;

  margin-left: -1px;

}

#negative-margin {

  font-size: 14px;

}

#negative-margin button {

  margin-left: -8px;

}

参考資料:[1]Fighting the Space Between Inline Block Elements | CSS-Tricks[2]Bootstrap · Components #buttonGroups[3]Using font-size: 0 to remove inline-block white-space does not work on Android Browser[4]Webフォーム設計漫談の1つinputボタンの各ブラウザ間の互換性[5]CSS3 patterned buttons - RedTeamDesign[6]CSS3 GitHub Buttons[7]Google+ UI Buttons - Shrapp.nl[8]CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions
専制
iosのUIsearchBar仮想キーボードを隠すいくつかの方法