💅✨Decorate from CSS : margin 겹침/중첩(1)

💅CSS/⚡ver.0

💅✨Decorate from CSS : margin 겹침/중첩(1)

4:Bee 2024. 2. 20. 14:12

728x90

이번 시간에는 margin 겹침/중첩 현상에 관해서 포스팅 하겠다. 아래 코드를 살펴 보자.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1 id="small">Hello, world</h1>

<h1 id="large">Hello, world</h1>

</body>

</html>

h1 {

border: 1px solid red;

margin: 100px;

}

위의 코드의 결과를 개발자 모드로 각 margin들의 위치를 살펴보면 아래와 같다.

이와 같은 현상을 확인 할 수 있는데 각 요소들의 margin들이 겹쳐 있음을 알 수 있다. 이것이 바로 margin 겹침/중첩 현상이다. 여기서 우리는 각 margin들을 조절 할 수 있는데 서로 기본 margin의 값들이 접촉이 되어 있는 크기 100px 이상부터 크기를 늘려야 아래 또는 위의 요소들로 부터 거리가 벌어진다. 만약 100px 이하로 둘 중 하나의 margin이 줄어 든다면 아무런 변화 없이 저 상태가 유지 될 것이다. 즉, 현재 요소들의 margin은 서로 의존이 되고 있기에 둘중에 하나만 크기가 줄어든다 해서 두개의 margin 사이 간격이 줄어드는 것이 아니라는 것이다. 그렇다면 margin 겹침/중첩 현상이 그저 문제가 되는 것일까? 그렇지 않다. 서로 중첩이 되기에 각 문자들의 간격이 일정하게 유지가 되는 것이다. 즉, 첫 번째 요소의 위의 간격이 100px이며 두 요소 사이의 간경이 100px, 마지막 요소의 하단이 100px로 유지가 되어야 우리가 생각하는 글자의 간격이 문제 없이 정렬이된다. 만약 그렇지 않느다면 두 요소 사이 간격은 200px이 되므로 비효율적으로 코드를 작성해야한다는 번거로움이 발생할 것이다.

728x90

저작자표시 (새창열림)