DIV VS SPAN
1.DIVとSPAN
divラベルはdisplay:blockと同じ性質を有する.したがって,堆積木のように上向きに展開する属性を持ち,width,height値の影響を受ける.
逆にspanラベルはdisplay:inlineの性質を持ち、上向きまたは下向きに密着する属性を有する.また、width、heightの影響を受けず、中身によって大きさが異なります.
次のhtmlとcssを見て、もっと直感的に理解してみましょう.
2.html、cssコード <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>div는 block 임돠</div> <!-- 빈칸을 나타내는 코드 -->
<div>div는 block 임돠</div>
<div>div는 block 임돠</div> <br>
<span>span은 inline 임돠</span>
<span>span은 inline 임돠</span>
<span>span은 inline 임돠</span>
</body>
</html>
div {
background: skyblue;
width: 300px;
height: 30px;
}
span {
background: pink;
width: 300px;
height: 30px;
}
divラベルは上下に積み重ねられており、幅の高さに適していますが、spanは横に積み重ねられており、幅の高さは中のテキストの内容に限られています.
しかしspanはdisplay: blockを追加すればblock形式に変更することもできる.
または、blockとinlineのプロパティを同時に持ちたい場合は.display: inline-blockと言えます.
Reference
この問題について(DIV VS SPAN), 我々は、より多くの情報をここで見つけました
https://velog.io/@yhko1992/DIV-VS-SPAN
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>div는 block 임돠</div> <!-- 빈칸을 나타내는 코드 -->
<div>div는 block 임돠</div>
<div>div는 block 임돠</div> <br>
<span>span은 inline 임돠</span>
<span>span은 inline 임돠</span>
<span>span은 inline 임돠</span>
</body>
</html>div {
background: skyblue;
width: 300px;
height: 30px;
}
span {
background: pink;
width: 300px;
height: 30px;
}divラベルは上下に積み重ねられており、幅の高さに適していますが、spanは横に積み重ねられており、幅の高さは中のテキストの内容に限られています.
しかしspanは
display: blockを追加すればblock形式に変更することもできる. または、blockとinlineのプロパティを同時に持ちたい場合は.
display: inline-blockと言えます.Reference
この問題について(DIV VS SPAN), 我々は、より多くの情報をここで見つけました https://velog.io/@yhko1992/DIV-VS-SPANテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol