css Padding, margin 튀어나오지 않게 하기

.aa{
    padding: (20px 20px 0 20px);
    box-sizing: border-box;
}

 

이런식으로 box-sizing:border-box;를 넣으면

범위를 초과하지 않습니다.

그리고 gap 을 함께 사용하면 옆간격도 띄우고 요소들간에 간격도 벌릴 수 있어요.

 

단 border: 1px solid rgb(36, 49, 65); 처럼 테두리를 적용시키려고 하는 경우에는

해당 div에 패딩을 하면 보기가 안좋아지죠. ㅋㅋ

이럴 경우는 해당 div의 부모 div에 gap, padding, box sizing을 넣어주면 됩니다. :)

 

margin의 경우는height, width를 auto를 이용하면 조절이 됩니다.

 

그리고 border-left 같은 것을 한쪽에 넣으면 크기가 커져서 또 안맞게 되는데

이럴 경우 마찬가지로 width:auto; 적용시키면 알아서 맞춰줍니다.

 

그리고 두가지 div의 height를 각각 100px, 100%를 넣으면(하나는 height:100px, 하나는 height:100%)

부모단 div의 높이를 초과해서 삐져나오게 됩니다.(100%에 100px가 추가됐으니. 100px만큼 더 나오게 됨)

이럴 때는 display:flex를 모든 div에 적용시키고

자식단의 div에 flex:1을 높이 대신 적용시키면

남은 높이만큼 자치하게 됩니다.

즉

.a{display: flex; flex:1;}

.b{display: flex; height:100px;}

이런식으로 넣어주면 a가 알아서 전체 크기에서 100px만큼 제외된 높이를 가지게 됩니다.

1080px가 전체 높이라면 980px가 되겟지용.