CSS/Cookbook

【CSS/Cookbook】How are the display values ​​different between block and inline block?

1Q74 2023. 5. 24. 16:56

1. Description

     display: block와 display: inline-block간의 차이를 알아본다.

2. Example

     [Click Me]버튼을 클릭할 때마다 display의 값이 block, inline-block으로 토글된다.

[1q74.tistory.com] css/fieldset
Div Boxes
inline-block
inline-block

3. Code

더보기 
<!-- ---------------------------------------------------------
  --
  -- Author: 1q74.tistory.com
  --
  --------------------------------------------------------- -->

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] css/fieldset</title>
<style>
fieldset#_1q74-example-container {
	border: solid 1px;
	border-style: dotted;
	padding: 10px;
}

div[name="_1q74-example-1"] {
	background: green;
	width: 100px;
	height: 100px;
	display: inline-block;
}

div[name="_1q74-example-2"] {
	background: lightgreen;
	width: 100px;
	height: 100px;
	display: inline-block;
}
</style>
</head>
<body>
	<fieldset id="_1q74-example-container">
		<legend>Div Boxes</legend>

		<div name="_1q74-example-1">
			inline-block
		</div>
		<div name="_1q74-example-2">
			inline-block
		</div>
	</fieldset>

	<br/>
	<button id="btn-1q74-example">Click Me</button>

<script>
const btn = document.getElementById("btn-1q74-example");

btn.addEventListener("click", function() {
	const examples = document.querySelectorAll("[name*=_1q74-example-]");

	examples.forEach(example => {
		const display = example.style.display;
		const isBlock = display == "block";

		let block = "";
		if(isBlock) {
			block = "inline-block";
		} else {
			block = "block";
		}

		example.style.display = block;
		example.textContent = block;
	});
});
</script>
</body>
</html>

4. File

[css][div][display]example.html
0.00MB