인프런 커뮤니티 질문&답변
작성한 질문수
한개의 item에 height와width를 설정 상태에서 margin/padding/border등을 주면, item크기가 어떻게 변하나요?
해결된 질문
작성
·
173
1
한 개의 item에 height와width를 설정 상태에서 margin/padding/border등을 주면, item크기가 어떻게 변하나요?
예를 들어 #item1의 크기를 height/width를 300px, 300px로 설정하고 padding을 30px로 준다고 하면, 330px, 330px이 되는 건가요? 아니면 300px, 300px은 변하지 않고 안에 padding이 생기는 건가요?
마찬가지로 border, margin을 30px씩 준다면 item1의 크기가 어떻게 변하는지 궁금합니다.
답변 1
0
그랩
지식공유자
width, height와 margin, padding은 전부 독립적인 속성입니다!
따라서 width와 height를 설정해줬으면, margin, padding은 독립적으로 따로 적용되기 됩니다.
margin을 따로 준다고 할 때 보통 주변의 엘리먼트로 부터 위치가 달라지기도 하며 만약 부모의 너비가 정해져있는 상황이라면 margin이 적용되면서 width, height가 줄어들기도 합니다 :)