日々のCSSスキルまとめ(2) inline-block_html/css_WEB-ITnoseによる混乱

1. 問題の説明

通常のレイアウトでは、主に行ラベルの幅と高さを設定できるため、inline-block がより頻繁に使用されます。レイアウトのプロセス中に、2 つの「問題」が見つかりました。

1 row label.display: inline-block 後の行ラベル間に 4 ピクセルのスペースがあります。 https://jsfiddle.net/firelight/69phh891/

2. display: inline-block の行ラベルに margin: 0 auto を設定すると、親の中央に配置されなくなります。 https://jsfiddle.net/firelight/jh5ojqu6/

私は、display: inline-block を、行ラベルとブロックラベルの両方であると理解し始めました。この 2 つの問題が現れると、単純に 1+1=2 ではないことがわかります。

2.

捋一捋コンセプト

block

は 1 行を占有し、複数のブロック要素はそれぞれ新しい行を持ちます。デフォルトでは、ブロック要素の幅がその親要素の幅に自動的に収まります。

幅と高さの属性を設定できます。ブロックレベル要素の幅が設定されている場合でも、依然として排他的な行を占有します。

marginとpadding属性を設定できます

inline

は、1行に配置できなくなるまで、複数の隣接するインライン要素が同じ行に配置されます。が追加され、その幅はコンテンツに応じて変化する要素の幅に依存します。

width 属性と height 属性の設定は無効です。

マージンとパディングのプロパティ、水平方向のパディング左、パディング右、マージン左、マージン右はすべてマージン効果を生成しますが、垂直方向のパディングトップ、パディングボトム、マージントップ、マージン-ボトムはマージン効果を生成しません。 。

inline-block

W3school: Inline-block 要素は、インライン要素として (隣接するコンテンツと同じ行に) 配置されますが、ブロック要素として動作します。

前の文の私の理解は次のとおりです。 inline-block 要素自体は依然として行ラベルですが、属性が設定されるとブロック ラベルの特性を持ちます。たとえば、リンク (要素) に inline-block 属性値を与えると、リンクがブロックの幅と高さの特性と、インラインのピア特性の両方を持つようになります。

3. 分析の問題

1. 表示: inline-block の後の行ラベル間に 4 ピクセルのスペースがあります。

最初はインラインブロックによる問題かと思いましたが、インラインブロックを削除してもこの4ピクセルはまだ存在していました。 Zhang Xinxu 氏のブログでは、これは仕様に準拠した適切なパフォーマンスであると説明されています。要素間の空白の原因はタグ セグメント間の空白であるため、HTML 内の空白を削除すると、空白が存在することになります。自然な間隔はありません。もちろん、HTML コード構造に影響を与えずにこの問題を解決する方法は N 通りあるため、ここでは詳しく説明しません。 Zhang Xinxu の記事を参照してください: http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove

2. 表示: inline-block 要素に margin: 0 auto を設定します。中心になるのでしょうか？

margin: 0 auto; は、ブロックのラベルが親の中央に配置されるように設定します。これは配置方法です。したがって、display: inline-block では、margin: 0 auto; を設定すると、行ラベル自体の性質が優先されるため (行ラベル自体はデフォルトで左揃えになります)、機能しません。 Text-align:center を親に中央揃えに設定する必要があります。一定のマージンを設定した場合は、上下左右の 4 方向も許容されます。 https://jsfiddle.net/firelight/jh5ojqu6/1/