CSS width : 100 % 패딩 값 / 자식요소 오버플로우 / 부모 자식 여백

💻 FE/🍓 HTML & CSS

CSS width : 100 % 패딩 값 / 자식요소 오버플로우 / 부모 자식 여백

Roy Miller 2023. 12. 22. 09:28

한 달 뒤의 내가 이 포스팅을 다시 봤을때 저 간단한걸 왜 몰라 할 수 있기를 바라며 ...

문제상황 : 습관성 width: 100% 로 인한 이슈가 발생하였다.

자식 요소가 부모요소 밖으로 튀어나올때!!

어떻게 해결을 보면 좋을까!!

뭐가 문제여서 그런걸까!!

을 알자보자 싶어 그냥 이것저것 해보고 기록하는 글이다.

0. 실험 기본 상태

0. box-sizing은 기본값이다.

1. body의 가로크기는 800px 이다.

2. 부모는 body의 가로크기를 100%으로 받고 패딩 50을 가지고 있다.

3. 자식은 부모의 가로크기를 100%으로 받는다.

여기서도 이슈 발생. 엄마가 오른쪽으로 치우쳤다. 이것은 body의 가로가 800에서 마진이 오토값으로 중앙정렬 되어 있는 상태에서 엄마의 패딩이 50으로 설정되어 있어 오른쪽으로 뚱뚱해졌다.(오른쪽 마진값이 마이너스가 된 상황임.) 🥹 아무튼 이부분은 일단 넘어가자. (이 글을 읽으면 이부분도 왜 이런줄 알 수 있다!)

<!DOCTYPE html>
<html>

<head>
    <title>Document</title>

    <style>
        body {
            margin: auto;
            width: 800px;
            height: 500px;
            background-color: aqua;
        }

        div {
            outline: 1px solid blue;
        }

        .mom {
            margin: 20px auto;
            width: 100%;
            height: 300px;
            background-color: beige;
            text-align: center;
            padding: 50px;
        }

        .child {
            width: 100%;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="mom">
        엄마 입니다.
        <div class="child">자식 입니다. </div>
    </div>
</body>

</html>

실험1. 자식요소의 패딩값을 늘려보자.

예상 : 자식이 패딩을 가져 뚱뚱해진만큼 부모도 뚱뚱해지지 않을까?

자식 요소에 padding: 50px 을 설정했다.

답 : 어림도없쬬~

자식 탈출 이슈 발생~!@!!!!!!!!!!!

여기서 머리에 박아야하는 생각

부모의 width 100%는 그 요소의 부모와만 상관이 있다. 🥹

여기서 부모에 overflow 속성을 hidden으로 해주면 튀어나간 부분이 잘려 나가보인다.

또한, 자식의 패딩값이 아닌 마진값을 50px로 하면 다음과 같이 된다. 포지션으로 옮겨놓은 것 마냥 생겨버렸다.

실험2. 자식을 패딩이 아닌 마진으로 키우고 부모 패딩을 늘려본다.

부모에 패딩 100px을 주고 자식에 마진 50px을 준 상태이다.

그래도 부모 안에 자식이 잘 들어가 있다. (당연할지도)

당연한걸 너무 어렵게 생각해서 어렵게 느껴지는 걸지도.

실험3. 자식의 with 값을 auto로 바꾸고 padding을 50px로 설정한다.

예 뻐 졌 다.

자식요소가 정해진 너비 값이 없을때는 너비값을 오토로 두는게 가장 바람직 한 것 같다.

챗 지피티가 알려준 해결법.

calc() 함수를 사용하여 부모의 전체 너비에서 여백의 합을 뺀 값을 너비로 설정합니다. 마진은 자식의 마진을 0으로 설정하여 겹치지 않도록 합니다.

변경된 부분은 부모(.mom)와 자식(.child)의 패딩과 마진입니다. 부모의 패딩을 20px로 설정하고, 자식의 패딩도 20px로 설정하여 여백이 겹치지 않도록 합니다. 또한, 자식의 너비를 calc(100% - 40px) 으로 설정하여 부모의 전체 너비에서 패딩의 2배를 뺀 값으로 조절하여 안으로 튀어나가지 않도록 합니다. 마지막으로, 자식의 마진을 0으로 설정하여 불필요한 여백이 생기지 않도록 합니다.

즉, 1. 여백을 주는 기준을 하나로 통일하고 2. 자식을 부모보다 작게 하라.

이제 생각해보자.

width: 100%이란 무엇인가. -> 부모의 witdh 값을 100% 그대로 상속 받겠단 뜻 .

부모와 자식 요소에 width값을 주지 않았다. 따라서 엄마요소도 body의 가운데에 위치한 걸 확인할 수 있다!!

width에 정확한 값이 없는 요소라면 이 형태가 제일 자연스럽다.

누군가에겐 당연한 정보겠지만 ,, 나에겐 무지 헷갈렸다,,, 자고로 부모란 자식을 품어주는게 아닌가 , ,, 아님말고 ,,

머리에 넣은것.

1.너비가 정해져있는 요소를

2.margin auto로 가운데 정렬한 상태에서

3.패딩 이상하게 주지 말자.

4.flex로 center 해주면 되긴 함. -> 이런경우 오른쪽 마진 -200px 이렇게는 안뜨더라.

5. width 800px 짜리를 100%으로 상속받았더래도, 그건 콘텐츠의 크기일 뿐!! 콘텐츠 바깥의 영역은 패딩, 마진 값으로 인해 어떻게 될지 모른다!!!

6. 생각없이 width 100% 하지 말자.

7. 자식 요소의 너비가 100%인 경우, 부모는 부담스러울지도?

일단

끝 🥹

'💻 FE > 🍓 HTML & CSS' 카테고리의 다른 글

웹 페이지 메타데이터에 대하여 알아보기 🎀 (0)	2025.03.06
01. Markup 언어와 Markdown 언어 비교 (2)	2025.03.04
[ HTML / CSS ] Margin 겹침 (0)	2023.12.18
[ HTML / CSS ] 포지셔닝, position (0)	2023.12.14
[ HTML / CSS ] z-index, stacking context (0)	2023.12.14

현재글CSS width : 100 % 패딩 값 / 자식요소 오버플로우 / 부모 자식 여백

yOu gOOd ?!

프로그래머스, 제로베이스내돈내산, 제로베이스, 제로베이스직무부트캠프, 재귀, CSS, 코딩테스트, 프론트엔드쪽집게취업스쿨, 블록요소, 제로베이스후기, 제로베이스스쿨, 인라인요소, 자바스크립트, HTML, z-index, MARGIN, 그냥, PADDING, width,

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

yOu gOOd ?!

CSS width : 100 % 패딩 값 / 자식요소 오버플로우 / 부모 자식 여백