ブロックとインラインの違い

ブロックはブロックレベル要素とも呼ばれ、インラインはインライン要素とも呼ばれます

ブロックレベル要素

各ブロックレベル要素は新しいです行の始まり
デフォルトの幅は 100% です
幅と高さを設定でき、マージンとパディングの属性も設定できます。

インライン要素

要素の前後に改行はありません。幅、高さ、幅は設定できません。内部コンテンツが埋められた後に計算されます。表示設定が無効です
ブロックレベルの要素を内部でネストすることはできません
幅と高さのimg input textarea selectの設定もインライン要素であるとは言えません。幅と高さの設定は両方とも置換要素であると言えます
置換要素とは、ブラウザが要素のタグと属性を使用して、要素の具体的な表示内容を決定することを意味します。通常、置換要素には固有の寸法があるため、設定可能な幅と高さがあります。
margin-left margin-rightpadding-leftpadding-rightのみ設定可能、つまり水平方向の場合、垂直方向には無効

ブロックレベル要素とインライン要素は変更可能display

を指定して相互に

よく使われるブロックレベルの要素

◎ blockquote - ブロッククオート
◎ dir - ディレクトリリスト
◎ p - よく使われるブロックレベルの要素
◎ fieldset - GroupPanelと同等のフォーム
◎ form - form
◎ h1 - 見出し
◎ h2 - サブタイトル
◎ h3 - レベル3見出し
◎ h4 - レベル4見出し
◎ h5 - レベル5見出し
◎ h6 - レベル6見出し
◎ hr - 水平区切り線
◎ ol - ソートフォーム
◎ p - 段落
◎ pre - 書式設定されたテキストは、入力形式に従ってテキストを出力します
◎ table - テーブル
◎ ul - ソートされていないリスト

よく使用されるインライン要素

◎ A タグ ◎ b - 太字
◎ BR - 改行
◎ CITE - 引用符付き
◎ code -code ◎ em - 強調
◎ font - フォント設定 (非推奨)
◎ input - 入力ボックス
◎ label - 表ラベル
◎ q - 短い引用
◎ select - 項目の選択
◎ small - 小さいフォントテキスト
◎ span - 一般的に使用されるインラインコンテナ、テキスト内のブロックを定義します
◎ Strong - 太い本文の強調
◎ sub - 下付き文字
◎ sup - 上付き文字
◎ textarea - 複数行のテキスト入力ボックス

インライン要素の幅と高さのマージンパディングの差分検証

スタイル:

        span,a{            
        width:100px;            
        height:500px;        
        }

        span,a {            
            margin-top:50px;            
            margin-right:150px;            
            margin-bottom:50px;            
            margin-left:150px;            
            padding-left:10px;            
            padding-right:10px;            
            padding-top:100px;            
            padding-bottom:100px;            
            border:1px solid yellow;            
            background-color:#d1d5d3;        
        }
        
        #p3,#p4{            
            width:400px;            
            height:200px;            
            background-color:black;        
        }

ログイン後にコピー

構造:

    <p id="container">
        <span>我是span </span>
        <a href="#">我是a</a>
        <p id="p4">p4</p>
    </p>

ログイン後にコピー

結果:

1. マージンが水平方向にのみ有効であることを検証します。

2. パディングが水平方向にのみ有効であり、垂直方向の黒 p には影響しないことを確認します
验证margin 只有水平方向有效

以上がファンクションブロックとインラインの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。