インライン要素とブロックレベル要素の違いの詳しい説明-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

インライン要素とブロックレベル要素の違いの詳しい説明

迷茫

Mar 25, 2017 am 10:46 AM

違い

1. インライン要素とブロックレベル要素の違い

1. インライン要素は行全体を占有せず、すべて同じ行に横に配置されます。

ブロックレベルの要素は、垂直方向に配置された 1 行を占めます。

2. ブロックレベル要素にはインライン要素を含めることができますが、インライン要素にはブロックレベル要素を含めることはできません。

3. インライン要素とブロックレベル要素の属性の違いは、主にボックスモデルの属性の幅が無効、高さが無効（line-heightは設定可能）、マージンアップ、および設定によるものです。 down は無効、up および down のパディングは無効です。

2. インライン要素とブロックレベル要素間の変換

インライン要素からブロック要素への変換: display:block;

ブロック要素はインライン要素への変換：display：inline;

3。幅と高さを設定しますか? 詳細な回答:

CSS では、要素はドキュメント構造の基礎であり、各要素は、そのコンテンツを含むボックス (ボックス、「ボックス」とも訳されます) を生成します。要素。ただし、要素が異なれば表示方法も異なります。たとえば、

と

も異なります。文書型定義 (DTD) では、さまざまな要素に対してさまざまな型が指定されます。これが、DTD が文書にとって重要である理由の 1 つです。 1. 置換可能な要素と置換不可能な要素

要素自体の性質から、置換可能な要素と置換不可能な要素に分けることができます。 a) 置換要素置換要素とは、ブラウザがタグと属性に基づいて要素の具体的な表示内容を決定することを意味します。

例えば、ブラウザはタグのsrc属性の値に基づいて画像情報を読み取って表示しますが、(X)HTMLコードを表示すると実際の内容は見えません。画像; 別の例は

HTMLの(X)、、

、<select>、<object>はすべて置換要素です。これらの要素には多くの場合、実際のコンテンツがありません。つまり、空の要素です。例: <p></p> <img src="cat.jpg" /><p> <input type="submit" name="Submit" value=" Submit" /><span style="font-size: 15px"></span> ブラウザはタグのタイプと属性に基づいてこれらの要素を表示します。置換可能な要素も表示内にボックスを生成します。 </p>
<p> b) 置換不可能な要素</p>
<p> (X)HTML のほとんどの要素は置換不可能な要素、つまり、そのコンテンツはユーザー (ブラウザなど) に直接表示されます。例: </p>
<p> <p>段落コンテンツ</p></p>
<p> 段落<p>は置換不可能な要素であり、テキスト「段落コンテンツ」が完全に表示されます。 </p>
<p> 2. 要素の表示</p>
<p> 置換可能な要素と置換不可能な要素の分類方法に加えて、CSS 2.1 の要素には、ブロックレベルの要素 (ブロックレベル) とインラインレベルの要素 (これも翻訳されます) という別の分類方法もあります。 「インライン」要素として）。 </p>
<p> a) ブロックレベル要素<br></p> 視覚的にブロックとしてフォーマットされた要素の最も明白な特徴は、デフォルトで親要素のコンテンツ領域を水平方向に埋め、左側には他の要素がないことです。デフォルトでは 1 行を占めます。 <p></p> 典型的なブロックレベル要素は、<p>、<p>、<h1> から <h6> などです。 <p></p> CSS によってフローティング (float 属性、左右にフロート可能) され、表示属性が "block" または "list-item" に設定されている要素は、ブロックレベルの要素です。 <p></p>
<p> しかし、浮遊要素は特別で、浮遊しているため、その隣に他の要素がある可能性があります。また、「list-item」(リスト項目 <li>) は、その前にドット記号または数値シーケンスを生成します。 </p>
<p> b) インライン要素</p>
<p> インライン要素は新しいコンテンツ ブロックを形成しません。つまり、<a>、<span>、<strong> などの他の要素が周囲に存在する可能性があります。典型的なインラインレベルの要素です。 </p>
<p> 表示属性が「inline」に等しい要素は全てインライン要素です。ほとんどすべての置換可能な要素は、<img>、<input> などのインライン要素です。 </p>
<p> ただし、要素の種類は固定ではなく、CSSの表示属性を設定することで、インライン要素をブロックレベルの要素にすることもできますし、ブロックレベルの要素をインライン要素にすることもできます。 </p>
<p><span style="font-family: Microsoft YaHei"> 3. 結論: </span></p>
<p><span style="font-family: 宋体"> 置換要素には通常、固有の寸法があるため、幅と高さを設定できます。たとえば、画像の幅と高さを指定しない場合、画像は保存時の画像の幅と高さである固有のサイズに従って表示されます。 </span></p>
<p><span style="font-family: 宋体"> フォーム要素については、ブラウザーにも幅や高さを含むデフォルトのスタイルがあります。 </span></p><p>以上がインライン要素とブロックレベル要素の違いの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p>

</div>
					</div>
					<div class="wzconShengming_sp">
						<div class="bzsmdiv_sp">このウェブサイトの声明</div>
						<div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div>
					</div>
				</div>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>ホットAIツール</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
													<h3>Undresser.AI Undress</h3>
												</a>
												<p>リアルなヌード写真を作成する AI 搭載アプリ</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
													<h3>AI Clothes Remover</h3>
												</a>
												<p>写真から衣服を削除するオンライン AI ツール。</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
													<h3>Undress AI Tool</h3>
												</a>
												<p>脱衣画像を無料で</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
													<h3>Clothoff.io</h3>
												</a>
												<p>AI衣類リムーバー</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ja/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ja/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title">
													<h3>AI Hentai Generator</h3>
												</a>
												<p>AIヘンタイを無料で生成します。</p>
											</div>
										</div>
																</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/ja/ai">もっと見る</a>
								</div>
							</div>
						</div>

<div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>人気の記事</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ja/faq/1796780570.html" title="R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3週間前</span>
										<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ja/faq/1796780641.html" title="R.E.P.O.最高のグラフィック設定" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.最高のグラフィック設定</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3週間前</span>
										<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ja/faq/1796785841.html" title="アサシンのクリードシャドウズ：シーシェルリドルソリューション" class="phpgenera_Details_mainR4_bottom_title">アサシンのクリードシャドウズ：シーシェルリドルソリューション</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>2週間前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ja/faq/1796780520.html" title="R.E.P.O.誰も聞こえない場合はオーディオを修正する方法" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.誰も聞こえない場合はオーディオを修正する方法</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3週間前</span>
										<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ja/faq/1796779766.html" title="WWE 2K25：Myriseのすべてのロックを解除する方法" class="phpgenera_Details_mainR4_bottom_title">WWE 2K25：Myriseのすべてのロックを解除する方法</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3週間前</span>
										<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/ja/article.html">もっと見る</a>
							</div>
						</div>
					</div>

<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>ホットツール</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title">
													<h3>メモ帳++7.3.1</h3>
												</a>
												<p>使いやすく無料のコードエディター</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中国語版" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 中国語版</h3>
												</a>
												<p>中国語版、とても使いやすい</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title">
													<h3>ゼンドスタジオ 13.0.1</h3>
												</a>
												<p>強力な PHP 統合開発環境</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title">
													<h3>ドリームウィーバー CS6</h3>
												</a>
												<p>ビジュアル Web 開発ツール</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 Mac版</h3>
												</a>
												<p>神レベルのコード編集ソフト（SublimeText3）</p>
											</div>
										</div>
																	</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/ja/ai">もっと見る</a>
								</div>
							</div>
						</div>

<div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>ホットトピック</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ja/faq/gmailyxdlrkzn" title="Gmailメールのログイン入り口はどこですか？" class="phpgenera_Details_mainR4_bottom_title">Gmailメールのログイン入り口はどこですか？</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>7467</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>15</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ja/faq/cakephp-tutor" title="CakePHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">CakePHP チュートリアル</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1376</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>52</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ja/faq/steamdzhmcssmgs" title="Steamのアカウント名の形式は何ですか" class="phpgenera_Details_mainR4_bottom_title">Steamのアカウント名の形式は何ですか</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>77</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>11</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ja/faq/winactivationkeyper" title="Win11 Activation Key Permanent" class="phpgenera_Details_mainR4_bottom_title">Win11 Activation Key Permanent</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>48</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>19</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ja/faq/newyorktimesdailybrief" title="NYTの接続はヒントと回答です" class="phpgenera_Details_mainR4_bottom_title">NYTの接続はヒントと回答です</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>19</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>20</span>
										</div>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/ja/faq/zt">もっと見る</a>
							</div>
						</div>
					</div>
				</div>
			</div>
							<div class="Article_Details_main2">
					<div class="phpgenera_Details_mainL4">
						<div class="phpmain1_2_top">
							<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
									src="/static/imghw/index2_title2.png" alt="" /></a>
						</div>
						<div class="phpgenera_Details_mainL4_info">

<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ja/faq/592543.html" title="インライン要素とブロックレベル要素とは何ですか?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202308/17/2023081711295328733.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="インライン要素とブロックレベル要素とは何ですか?" />
								</a>
								<a href="https://www.php.cn/ja/faq/592543.html" title="インライン要素とブロックレベル要素とは何ですか?" class="phphistorical_Version2_mids_title">インライン要素とブロックレベル要素とは何ですか?</a>
								<span class="Articlelist_txts_time">Aug 17, 2023 am	 11:33 AM</span>
								<p class="Articlelist_txts_p">インライン要素には、div、p、h1-h6、ul、ol、li、table、form などが含まれ、ブロックレベルの要素には、span、a、img、strong、em、input、label などが含まれます。 2 つの要素の特徴: 1. インライン要素は行を占有し、親コンテナの幅を自動的に埋め、幅、高さ、内側と外側のマージンおよびその他の属性を設定でき、他のブロックレベル要素とインライン要素を含めることができます。 ; 2. インライン要素は排他的な行を占有しません、幅と高さは内容によって決まり、内余白と外余白は要素自体の配置にのみ影響します。</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ja/faq/619476.html" title="インライン要素とブロックレベル要素の違いは何ですか?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202310/16/2023101609503858496.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="インライン要素とブロックレベル要素の違いは何ですか?" />
								</a>
								<a href="https://www.php.cn/ja/faq/619476.html" title="インライン要素とブロックレベル要素の違いは何ですか?" class="phphistorical_Version2_mids_title">インライン要素とブロックレベル要素の違いは何ですか?</a>
								<span class="Articlelist_txts_time">Oct 16, 2023 am	 09:51 AM</span>
								<p class="Articlelist_txts_p">インライン要素とブロックレベル要素には、「ボックスモデル」、「配置」、「コンテンツ表示」、「相対位置」、「デフォルトサイズ」の 5 つの違いがあります。 1. インライン要素は独立したボックス、幅、高さを生成しません。内容に応じて、ブロックレベル要素は独立した長方形のフレームを生成し、幅、高さ、マージン、パディングなどの属性を設定できます; 2. インライン要素は同じ行に水平に配置されますが、ブロックレベル要素は上から下へ押す 順番に並べる; 3. インライン要素にはブロックレベル要素を含めることはできませんが、ブロックレベル要素には他のブロックレベル要素およびインライン要素を含めることができます。</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ja/faq/470675.html" title="HTMLのインライン要素とブロック要素とは何ですか?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202102/20/2021022015575660951.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTMLのインライン要素とブロック要素とは何ですか?" />
								</a>
								<a href="https://www.php.cn/ja/faq/470675.html" title="HTMLのインライン要素とブロック要素とは何ですか?" class="phphistorical_Version2_mids_title">HTMLのインライン要素とブロック要素とは何ですか?</a>
								<span class="Articlelist_txts_time">Feb 20, 2021 pm	 04:03 PM</span>
								<p class="Articlelist_txts_p">HTML インライン要素には、a (アンカー要素)、b (太字)、br (改行)、code、em (強調)、font (フォント設定)、i (斜体)、img (画像)、input (入力ボックス) が含まれます。 )、span、strong (太字強調)、textarea、u など; ブロック要素には、address (アドレス)、blockquote (ブロック引用符)、center (中央揃えのブロック)、div、h1~h6 (タイトル)、hr が含まれます。 ( 水平分割線)、p、ul、ol など。</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ja/faq/634793.html" title="インライン要素とブロックレベル要素の違い: HTML における要素分類の深い理解" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/000/164/170329687399445.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="インライン要素とブロックレベル要素の違い: HTML における要素分類の深い理解" />
								</a>
								<a href="https://www.php.cn/ja/faq/634793.html" title="インライン要素とブロックレベル要素の違い: HTML における要素分類の深い理解" class="phphistorical_Version2_mids_title">インライン要素とブロックレベル要素の違い: HTML における要素分類の深い理解</a>
								<span class="Articlelist_txts_time">Dec 23, 2023 am	 10:01 AM</span>
								<p class="Articlelist_txts_p">インライン要素とブロックレベル要素の違い: HTML の要素の分類を深く理解する HTML では、要素はインライン要素とブロックレベル要素の 2 つのカテゴリに分類できます。 HTML のレイアウトとスタイルを正しくマスターするには、それらの違いを理解することが非常に重要です。この記事では、インライン要素とブロックレベル要素の特性を深く理解し、具体的なコード例を示します。インライン要素 インライン要素は、HTML ドキュメント内でデフォルトでインラインに表示される要素です。これらは行全体を占めるわけではありませんが、ドキュメント フローの配置方法に基づいて行内に密接に表示されます。業界ではよくあること</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ja/faq/680335.html" title="margin 属性はインライン要素には影響しません" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/000/164/170824539359008.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="margin 属性はインライン要素には影響しません" />
								</a>
								<a href="https://www.php.cn/ja/faq/680335.html" title="margin 属性はインライン要素には影響しません" class="phphistorical_Version2_mids_title">margin 属性はインライン要素には影響しません</a>
								<span class="Articlelist_txts_time">Feb 18, 2024 pm	 04:36 PM</span>
								<p class="Articlelist_txts_p">インライン要素に対するマージンの影響は、ブロックレベル要素の影響とは異なります。インライン要素では、margin 属性は垂直方向の上下のマージンにのみ影響し、水平方向の左右のマージンには影響しません。たとえば、HTML に段落要素がある場合、それにいくつかのスタイルを設定し、その要素に対する margin 属性の効果を観察できます。 HTML コードは次のようになります。</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ja/faq/619478.html" title="HTMLのインライン要素とブロックレベル要素とは何ですか?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202310/16/2023101609573984528.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTMLのインライン要素とブロックレベル要素とは何ですか?" />
								</a>
								<a href="https://www.php.cn/ja/faq/619478.html" title="HTMLのインライン要素とブロックレベル要素とは何ですか?" class="phphistorical_Version2_mids_title">HTMLのインライン要素とブロックレベル要素とは何ですか?</a>
								<span class="Articlelist_txts_time">Oct 16, 2023 am	 09:57 AM</span>
								<p class="Articlelist_txts_p">HTML で一般的に使用されるインライン要素とブロックレベル要素は次のとおりです。 1. ブロックレベル要素には、<div>、<p>、<ul>、<ol>、<li>、<h1>~<h6> などのセマンティクスが含まれます。 、<header> タグ; 2. インライン要素には、<span>、<a>、<strong>、<em>、<img>、<input> などのタグが含まれます。</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ja/faq/630696.html" title="インライン要素とブロックレベル要素とは何ですか?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202311/24/2023112413541576064.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="インライン要素とブロックレベル要素とは何ですか?" />
								</a>
								<a href="https://www.php.cn/ja/faq/630696.html" title="インライン要素とブロックレベル要素とは何ですか?" class="phphistorical_Version2_mids_title">インライン要素とブロックレベル要素とは何ですか?</a>
								<span class="Articlelist_txts_time">Nov 24, 2023 pm	 01:57 PM</span>
								<p class="Articlelist_txts_p">インライン要素には、a、span、strong、b、em、i、label、img、input、select、textarea、button、abbr、cite、code、big、small、sub、sup などが含まれます。ブロックレベル要素には、div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、menu、pre などが含まれます。</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ja/faq/634938.html" title="CSSのインライン要素とブロックレベル要素の利用シーンとメソッドを詳しく解説" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/000/164/170331236737120.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSのインライン要素とブロックレベル要素の利用シーンとメソッドを詳しく解説" />
								</a>
								<a href="https://www.php.cn/ja/faq/634938.html" title="CSSのインライン要素とブロックレベル要素の利用シーンとメソッドを詳しく解説" class="phphistorical_Version2_mids_title">CSSのインライン要素とブロックレベル要素の利用シーンとメソッドを詳しく解説</a>
								<span class="Articlelist_txts_time">Dec 23, 2023 pm	 02:19 PM</span>
								<p class="Articlelist_txts_p">CSS インライン要素とブロックレベル要素の詳細な説明: アプリケーション シナリオと使用方法を探る CSS では、要素は表示特性に基づいて、インライン要素とブロックレベル要素の 2 つのタイプに分類できます。 Web 開発者にとって、これら 2 つの概念を理解することは非常に重要です。それらの異なる特性によってアプリケーション シナリオと使用方法が決まるからです。インライン要素は、Web ページ内で 1 行のみを占める要素です。一般的なインライン要素には、<span>、<img>、および <input> が含まれます。</p>
							</div>
													</div>

<a href="https://www.php.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton">
								<span>See all articles</span>
								<img src="/static/imghw/down_right.png" alt="" />
							</a>
											</div>
				</div>
					</div>
	</main>
	<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/ja/about/us.html">私たちについて</a>
            <a href="https://www.php.cn/ja/about/disclaimer.html">免責事項</a>
            <a href="https://www.php.cn/ja/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

document.addEventListener("DOMContentLoaded", (event) => {
			// 定义一个函数来处理滚动链接的点击事件
			function setupScrollLink(scrollLinkId, targetElementId) {
				const scrollLink = document.getElementById(scrollLinkId);
				const targetElement = document.getElementById(targetElementId);

if (scrollLink && targetElement) {
					scrollLink.addEventListener("click", (e) => {
						e.preventDefault(); // 阻止默认链接行为
						targetElement.scrollIntoView({
							behavior: "smooth"
						}); // 平滑滚动到目标元素
					});
				} else {
					console.warn(
						`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
						);
				}
			}

// 使用该函数设置多个滚动链接
			setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
			setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
			setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
			setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
			setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
			setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
			// 可以继续添加更多的滚动链接设置
		});

window.addEventListener("scroll", function () {
			var fixedElement = document.getElementById("Article_Details_main1Lmain");
			var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
			var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
			var scrollHeight = document.documentElement.scrollHeight; // 页面总高度

// 计算距离底部的距离
			var distanceToBottom = scrollHeight - scrollTop - clientHeight;

// 当距离底部小于或等于300px时，取消固定定位
			if (distanceToBottom <= 980) {
				fixedElement.classList.remove("Article_Details_main1Lmain");
				fixedElement.classList.add("Article_Details_main1Lmain_relative");
			} else {
				// 否则，保持固定定位
				fixedElement.classList.remove("Article_Details_main1Lmain_relative");
				fixedElement.classList.add("Article_Details_main1Lmain");
      		}
    	});

</script>
</body>

</html>