css学習メモ2 inline-block_html/css_WEB-ITnose

1. Inline-block は、CSS2.1 の新しいボックス タイプです。div で表示属性を「inline-block」に設定すると、div の表示効果は表示属性を設定した場合と同じになります。 「インライン効果」にします。

inline-blockは、内部的にinline属性のcolumn属性とblock属性を持ち、width、height、margin、padding、borderなどの要素が使用できます。

2. inline-block を使用すると、場合によっては float 要素を置き換えることができます。 PS: 水平ナビゲーション バーを作成します

inline-block が登場する前は、通常、次のコードが上記の機能を完了するために使用されていました。 inline-block を使用する場合は、次のコードで完了できます。

<div class="nav">    <ul>        <li><a href="">AngularJS</a></li>        <li><a href="">AngularJS</a></li>        <li><a href="">AngularJS</a></li>        <li><a href="">AngularJS</a></li>        <li><a href="">AngularJS</a></li>        <li><a href="">AngularJS</a></li>    </ul></div>li {    float: left;    list-style: none;    width: 100px;    padding: 10px 0;}

2 つの違いについては、float はドキュメント フローの外にあります。テキストの折り返しが必要な場合は、float 要素を選択する必要があります。ナビゲーションを中央に配置するか、垂直方向に配置する必要があります。インラインブロックを使用する必要があります。

inline-blockを使用する際、上記のli要素にボーダーを付けると左右に空白ができてしまうのですが、どうすればよいでしょうか？では、解決策を見てみましょう:

HTML の空白を削除する

: 要素間で行を改行しないでください。これは面倒かもしれませんが、特にそうしない場合には、方法でもあります。多くの要素はありません。

1. 負のマージンを使用する: 負のマージンを使用してギャップを埋めることができます。ただし、空白の幅はこの属性に関係するため、font-size を調整する必要があります。 0.25emだと思いますが、わかりません。知っている人がいたらメッセージを残して教えてください。
2. 親要素に font-size:0 を設定します: 空白がどんなに大きくても、空白と font-size の関係により、この属性を設定すると空白の幅を 0 に設定できます。 、子要素の font-size をリセットする必要もあります。