HTML/CSS行の要素とブロック要素

1311 ワード

CSSには主に2つのbox要素があります:block要素とinline要素

📌 ブロック要素

前後に改行が発生し、他の要素を別の行

にプッシュする.
100%

行を使用します.未使用のスペースはmargine

幅、高さ、塗りつぶし、マージン、ボーダーは

を使用できます.

延伸特性の異なる要素

ブロック要素で使用可能

コンテンツサイズ
width、height属性
行の要素でブロック要素を使用できません

</li> <li> padding,borderは利用可能であるが,ピッチは左右</li>のみ利用可能である.<li> paddingとborderの上下値は他の要素を引っ張らない (次のようにdivを押しのけて侵さない) <iframe class="embed"scrolling="no"src="https://codepen.io/nayoung-gu/embed/NWXYdPX?default-tab=html%2Cresult"allowfullscreen=""/> </li></ul> <h2>📌 inline-block</h2> <ul><li>ブロック(ブロック)要素のように塗りつぶし、余白、高さ、幅を指定できますが、1行に複数の要素をインライン(ライン内)要素のように配置できるブロック<pre><code class="language-null">div {display: inline-block}</code></pre></li>です. </ul> <img src="https://s1.md5.ltd/image/ca1612c01fcc265e5c16be63fa2c7d90"/>画像ソース:ビニフ inline, block element lists <a href="https://www.w3schools.com/html/html_blocks.asp" rel="nofollow">참고 사이트 (1)</a> , <a href="https://www.w3resource.com/html/HTML-block-level-and-inline-elements.php" rel="nofollow">(2)</a> </li>

この問題について(HTML/CSS行の要素とブロック要素), 我々は、より多くの情報をここで見つけました https://velog.io/@mooongs/HTMLCSS-인라인-요소와-블록-요소

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol