検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML インラインブロック

HTML インラインブロック

PHPz
PHPzオリジナル
2024-09-04 16:18:57562ブラウズ

HTML には、インライン ブロック要素と呼ばれる別のタイプの要素があります。これは、HTML コンテンツ フローを中断するのではなく、定義された要素によって呼び出されるそれぞれのタグによって占有および境界付けされるスペースにすぎません。ブロックレベル要素の機能は主に

として考慮されます。タグは、 という Inline Elements タグと同じものです。主にインラインブロック要素に焦点を当てます。インライン要素とインラインブロック要素には若干の違いがあります。ユーザーはHTML要素の幅と高さを設定できます。また、上部、下部、表示もカスタマイズしています。コンテンツはインラインブロックになり、パディングも初期化されます。必要な要件。

HTML インラインブロックの構文

基本的な構文は以下のとおりです:

構文:

<html>
<body>
<p><span> ---some html codes ---</span> </p>
</body>
</html>

上記のコードは、HTML で inline-block 要素を記述するための基本的な構文です。以下では、事前定義された inline-block 要素のセットをいくつか使用しました。

  • <大>

  • <ボタン>
  • <引用>
  • <コード>
  • <画像>
  • <入力>
  • <ラベル>
  • <地図>

上記のタグは、主に HTML 内のユーザー要件に基づいて事前定義された HTML インライン要素です。 に焦点を当てます。 HTML の inline-block 要素内のタグ。ブロックレベルの要素は常に新しい行で始まり、指定された変数の全幅を占めますが、インライン要素は新しい行で始まりません。また、ブロックレベルの要素に比べて必要な幅は小さくなりますが、HTML のインライン要素で幅を宣言する必要があります。インライン要素は段落要素の内側で宣言されます。 要素はコンテナ内でテキストとして使用されることが多く、特定の必須属性はありませんが、指定された CSS スタイル、クラス、ID は の場合に共通です。要素はテキストの一部のスタイル部分で CSS と一緒に使用されます。

HTML インライン ブロックを作成するには?

  • 以前の記事で説明したように、ブロックレベル要素内に HTML インラインブロック要素を作成しました。 HTML 要素は、ユーザーが指定された必要なスペースを割り当てるだけで、HTML タグの同じ行に隣り合って表示されます。 HTML 要素の高さと幅を制御することはできません。これはインライン要素のプロパティです。
  • display: inline と呼ばれる CSS スタイル属性は、必要な場合にパディングとマージンの設定を無視します。これにより、HTML 内でパディングとマージンの値を使用できるようになります。これにはインライン要素のみが含まれており、display: inline などの設定を使用してブロック要素が 1 行に表示されます。 HTML コードを最小化したくない場合は、CSS スタイルを使用して div タグを幅 50% に設定できます。これは、インライン ブロック要素用の CSS ソリューションです。
  • 場合によっては空白を使用できます。no-wrap は親コンテナです。
    が許可されます。 div を連鎖させずに予想どおりに各 div インラインブロックに表示するタグは、ネストされた div タグとも呼ばれます。 CSS スタイルを使用してレイアウトを作成するために使用されるいくつかのインライン ブロック要素について説明しました。
  • CSS スタイルの inline-block 要素設定で表示された HTML で 2 つの divs タグを使用するとします。各タグの幅を 50% に設定できますが、2 番目の div タグは最初の div タグより下になります。

    • コード:

    <html>
<head>
section {
background: green;
box-sizing: border-box;
padding: 150px;
}
div {
box-sizing: border-box;
display: inline-block;
height: 100px;
padding: 54px;
text-align: center;
width: 53%;
}
.green {
background: lightgreen;
}
.black {
background: black;
}
</head>
<body>
<span style="border: 2px lightgreen">
</span>
<section>
<div class="green">Width: 40%</div>
<div class="black">Width: 60%</div>
</section>
</body>
</html>

    上記のコードの説明: 上記のコードでは、2 つの div タグの幅を設定しました。それぞれ 50% になり、表示属性は inline-block になります。 2 つの div タグの幅が 50% であるため、予想される出力は異なります。そのため、いずれかのタグ値が 51% または 49% に変更される必要があります。それでも、これは良い習慣ではなく、HTML 要素のスペースにとっても十分ではありません。インライン要素は HTML の 2 つの div タグ間の単語間隔を考慮するため、少なくとも 50% が必要です。

    We can also use some borders and padding styles in the HTML div tags; it will highlight the web pages more effectively. We use

    tag called block-level elements for the above codes. We use the tag as the inline element tag; we will use some contents inside the tags that will be required on the web page.

    Examples to Implement in Inline-Block

    We will discuss the below examples.

    Example #1

    Code:

    <html>
<body>
<p>Sample <span style="border:3px green">Welcome</span>To my domain</p>
<p>Welcome to My Domain</p>
</body>
</html>

    Output:

    HTML インラインブロック

    Example #2

    Code:

    <html>
<head>
<style>
span.first {
display: inline;
width: 150px;
height: 120px;
padding: 8px;
border: 3px  blue;
background-color: green;
}
span.second {
display: inline-block;
width: 140px;
height: 110px;
padding: 7px;
border: 3px blue;
background-color: green;
}
span.third {
display: block;
width: 103px;
height: 110px;
padding: 6px;
border: 2px yellow;
background-color: black;
}
</style>
</head>
<body>
<div> Welcome to My Domain
<span class="first">Welcome</span>
<div>
<div> Same Same
<span class="second">Same Same</span>
<div>
<div> Welcome to My Domain
<span class="third">Welcome</span>
<div>
</body>
</html>

    Output:

    HTML インラインブロック

    Example #3

    Code:

    <html>
<head>
<style>
.first {
float:center;
display: inline;
width: 150px;
height: 120px;
padding: 8px;
border: 3px  blue;
background-color: green;
}
.1{
clear:center;
}
</style>
</head>
<body>
<div class="first"> <marquee> Welcome to My Domain</marquee>
</div>
</body>
</html>

    Output:

    HTML インラインブロック

    Explanation of the above code: The first example will discuss the essential inline element called tag that will use for the web page; the second example will use span in the CSS style, and the same will be called in the tag in body sections each of the CSS styles will be defined in each span third example we will use some text values in the box-limit areas in the inline-block element features.

    Conclusion

    In Conclusion, partly based on the above topics, we have some ideas about inline-block elements in Html. We use both tag elements for their dependencies and features in user areas. However, IE and other browser versions may or may not support some tags.

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

css less html Object if for select class var map display margin padding input word
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML ブロック要素次の記事：HTML ブロック要素

関連記事

続きを見る