margin 과 gap

 

• margin: 개별 요소 간에 원하는 곳에 자유롭게 간격을 줄 수 있습니다.
• gap: flex나 grid 레이아웃에서 자식 요소 간에 균일한 간격을 적용할 때 사용됩니다.

gap은 display: flex 또는 display: grid에서만 작동합니다. 만약 상위 컨테이너가 제대로 flex 레이아웃으로 설정되지 않았다면 gap이 적용되지 않을 수 있습니다. 따라서 부모 컨테이너에 display: flex가 적용되어 있는지 다시 확인해야 합니다.

 

<div class="container">
    <div class="flex-row" style="display: flex; align-items: center; gap: 10px;">
        <div style="display: flex; gap: 10px;  ">
            <div class="flex"  th:if="${sessionName}">
                <button class="signup-button" onclick="logoutButton()">로그아웃</button>
            </div>
            <div class="flex"  th:unless="${sessionName}">
                <button class="signup-button" onclick="toLogin()">로그인</button>
            </div>
            <div class="flex">
                <button class="signup-button" onclick="redirectToSignup()">회원가입</button>
            </div>
            <div class="flex">
                <button class="signup-button" onclick="moveMyPage()">마이 페이지</button>
            </div>
        </div>
    </div>
</div>

세번 째 줄 div 스타일을 정해뒀지만 그 안에 있는 요소들이 가로정렬이 되지 않았다 이유는 class flex로 정하지 않아서 였다. flex의 gap을 사용하는 방법을 외워두자..!