배경
공부를 하던 도중 해당 속성을 이용했더니 깔끔하게 중앙정렬이 되었다. 그래서 그 원리가 궁금했다. 😙😙
'0'
여기서 0값은 위 아래 여백을 주지 않는다는 의미이다. 즉, margin: ;에서 값은 좌우위아래 여백을 뜻하고, 여기에 '0'이 놓여졌으므로 좌우 위 아래 여백을 지정하지 않는다는 뜻이다.
'auto'
auto는 가로 중앙에 배치한다는 뜻이다. 그리고 자연스럽게 좌우 여백은 균등하게 배분된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 1200px;
height: 100px;
margin: 0;
color: blueviolet;
size: 20rem;
}
</style>
</head>
<body class="content">
가나다라마바사
</body>
</html>결론
margin:0 auto;는 위아래 여백 없이 가로 중앙에 배치되는 가장 기본적인 서식💖
출처: https://hansolcha.tistory.com/4 [hansol.cha]
Step by step goes a long way ✨