html 에서  box-size에 대한 정리

html 에서  box-size에 대한 정리

html 코딩중에 개체 (오브젝트)  등을  구성하는 box 들에 대한  넓이(widht) 와 높이(height) 에 대한 부분과 box의 padding(box의 안쪽 공간) margin(box의 밖같 공간)의 크기를 의미하며, padding 과 margin 의 사이에는 테두리(bording)가 존재 합니다.  각 속성은 크기(size)를 정의하여 사용하며, 수치를 정의하기 때문에 해당 부분에 px, rem등의 단위를 적용 할 수 있습니다.

[/fusion_text][fusion_text rule_style=”default” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” animation_direction=”left” animation_speed=”0.3″]

margin 과 padding의 속성

• padding :  본문 내용과  border 안쪽의 공간(여백)을 뜻함.
• border: 선(선의 굵기를 조정할 수 있으며, 비쥬얼상 선을 표시 않고 숨길수도 있는 있지만, 삭제할 수는 없다.
• margin: border의 바깥 공간(여백)을 뜻함.

box (오브젝트)의 배경색을 변경시에 box의 padding 은 배경색상에 영향을 받지만 바깥 공간(여백) 부분에 해당하는 margin는 배경색상에 영향을 받지 않는다. margin, padding  모두  ex) margin-top, margin-rignt, margin-bottom, margin-left 의 형태로 각 영역의 크기를 방향별로 설정할 수 있다.