인프런 커뮤니티 질문&답변

DogFoot님의 프로필 이미지
DogFoot

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

상세 디자인을 위한 CSS 박스모델(width, height, padding, margin, box-sizing)

보더와 박스

작성

·

258

1

12:54 에서 패딩과 보더가 각각 4면에 균일하게 들어갔으니 패딩은 총 80 , 보더는 총 40아닌가용?

답변 2

1

Mel 님께서 말씀하신 '패딩은 총 80 , 보더는 총 40' 은 너비와 높이를 합한 값 입니다.

너비와 높이를 합산한 값을 고려할 일은 없습니다.

너비 따로 높이 따로 생각하시면 이해가 편하실거에요.

너비 패딩은 좌우해서 총 40, 너비 보더는 좌우해서 총 20

높이 패딩은 위아래해서 총 40, 높이 보더는 위아래해서 총 20

0

박스모델(width 300px, height:100px)안에 박스(width100px height100px) 3개를 넣을때 box-sizing:border-box는 margin에는 영향을 안주는 것 같은데 혹시 박스3개 짜리에 margin을 1px씩 넣고 싶으면 큰 박스모델은 width306px; height102px로 계산해서 해야하나요?

박스사이징은 패딩과 보더 포함 여부를 결정하지 사진은 제어하지 못합니다.  이런 경우 마진이 필요한 경우 display: flex 주시고 gap: 10px 이렇게 하시면 수월합니다.

DogFoot님의 프로필 이미지
DogFoot

작성한 질문수

질문하기