block과 inline의 가운데 정렬

block과 inline을 구분하는 데 익숙해지니, 둘의 가운데 정렬 방법을 제대로 정리해놔야겠다는 생각이 들었다.
text-align 고찰을 통해 부모 요소 속 inline 컨텐츠는 text-align으로 가운데 정렬을 하면 된다는 것을 알아냈다.
(근데 여기서 의문, 부모 태그가 있으면 안에 있는 것들은 inline 요소가 되는건가? 또 헷갈림 ==> 아님! 컨텐츠 속에 있는 모든 inline 요소들이 정렬되는 것임!! 만약에 div > h1{야옹} 일 때, div{text-align: center;} 를 준다면 block 요소인 h1 그 자체가 가운데 정렬이 되는 게 아니라, h1 속 컨텐츠인 야옹이 가운데 정렬되는 것임. 당연함. block은 이미 한줄 꽉 차지하고 있어서 본인은 정렬되고 말고 할게 없음.)
이제 컨텐츠 정렬이 아닌 자기 자신 자체의 가운데 정렬을 정리해볼 때가 됐다.
테스트해 볼 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <style>
            * {
                margin: 0;
                font-weight: 500;
                font-size: 16px;
            }

            .block {
                width: 200px;
                background-color: pink;
            }

            .inline {
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1 class="block">h1은 블락</h1>
            <span class="inline">span은 인라인</span>
        </div>
    </body>
</html>

여기서 나는 핑크색 박스와 하늘색 박스 안의 텍스트를 가운데 정렬하는 것이 아니라, 각 박스 자체가 가운데로 오게 하길 원한다.
먼저 .block를 가운데 정렬시키기

.block {
width: 200px;
background-color: pink;

margin: 0 auto; <==
}

block 요소는 이렇게 간단히 자기 자신에게 margin: 0 auto;를 주어서 가운데 정렬을 시킬 수 있었다.

문제는 .inline...
.inline {margin: 0 auto;}을 주어도 꼼짝도 안한다.
이상하다. inline은 margin-top|bottom은 안먹혀도 margin-left|right는 먹는데? 아래의 코드로 top과 bottom은 안돼도 left는 되는 것을 확인했다

.inline {
         margin-top: 100px;
         margin-bottom: 100px;
         margin-left: 100px;
}

그런데 margin: 0 auto;가 안먹는 이유는 뭘까?
inline에게는 사용 가능 공간이 없기 때문이다.
사용 가능 공간에 대해서는 빔캠프 종찬님의 영상을 참고하면 이해가 훨씬 쉽다.
block 요소는 알다시피 한줄을 몽땅 차지한다. width로 너비를 조절해도 너비 외의 공간은 다른 요소의 공간이 아닌, block 자신의 언제든 사용 가능한 공간으로 남는다. 그리고 이 사용 가능 공간은 margin으로 조절 가능한 구역이다.
반면에 inline은 자기 컨텐츠만큼의 크기만 차지하기 때문에 사용 가능 공간이랄 게 없다.
정리하자면(뇌피셜임) block 요소는 태어날 때부터 margin 영역을 갖고 태어나지만, span은 직접 margin을 부여하지 않는 이상 따로 margin 영역을 가지고 있지 않기 때문에 margin: 0 auto이 먹히지 않는 것 같다.
암튼 그래서.. 하늘색 박스는 어떻게 가운데 정렬을 해야하느냐? 박스의 부모인 .container에게 text-align:center를 주면 된다. (여기서 h1의 텍스트도 가운데 정렬된 이유: text-align은 자식(+자손)에게 상속되기 때문~)

            .container {
                text-align: center;
            }

            .block {
                width: 200px;
                background-color: pink;

                margin: 0 auto;
            }

            .inline {
                background-color: skyblue;
            }

정리하면서 든 생각..

inline 요소는 부모에 의지하여 정렬되는 아이라고 생각하면 될까? 혼자서 위와 같은 결과는 나올 수 없나? position이나 flex, float 등을 사용하지 않는다면?

padding과 margin이 뭔지는 정확히 이해했다고 생각했는데 이렇게 또 빈틈이.. 그래도 이렇게 정리할 수 있을 만큼 성장해서 매우 뿌듯하다!

Author And Source

이 문제에 관하여(block과 inline의 가운데 정렬), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@losnah5h/block과-inline의-가운데-정렬

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

block과 inline의 가운데 정렬

Author And Source

좋은 웹페이지 즐겨찾기