CSS 속성 알아보기 (요소의 너비와 여백)

 

박스 모델 (Box Model)

 

HTML의 모든 요소는 박스(Box) 모양으로 구성되며, 이러한 모양을 박스 모델(Box Model)이라고 부른다

 

 

width와 height 속성

 

요소의 가로/세로 너비

 

width와 height 속성은 지정하지 않아도 auto(기본값 - 요소에 이미 들어있는 속성의 값)라는 값이 들어감

 

기본값(Auto) - 브라우저가 너비를 계산

단위 - px, em, vw 등 단위로 지정

 

<span></span> <!-- 대표적인 인라인 요소 -->
인라인 요소에서 width의 auto 값은 포함한 콘첸츠 크기만큼 자동으로 줄어듬
인라인 요소에서 height의 auto 값은 포함한 콘첸츠 크기만큼 자동으로 줄어듬

<div></div> <!-- 대표적인 블록 요소 -->
블록 요소에서 width의 auto 값은 부모 요소의 크기만큼 자동으로 늘어남
블록 요소에서 height의 auto 값은 포함한 콘첸츠 크기만큼 자동으로 줄어듬

 

max-width와 max-height 속성

 

요소가 커질 수 있는 최대 가로/세로 너비

 

기본값(None) - 최대 너비 제한 없음

단위 - px, em, vw 등 단위로 지정

 

min-width와 min-height 속성

 

요소가 작아질 수 있는 최소 가로/세로 너비

 

기본값(0) - 최소 너비 제한 없음

단위- px, em, vw 등 단위로 지정

 

margin 속성 - 외부 여백

 

요소가 외부 여백(공간)을 지정하는 단축 속성, 음수를 사용할 수 있다

 

기본값(0) - 외부 여백 없음

auto - 브라우저가 여백을 계산 (가운데 정렬)

단위 - px, em, vw 등 단위로 지정

 

margin: 0; /* 외부 여백이 없는 상태 */

margin: 10px; /* 값이 1개 - top, right, bottom, left 외부 여백에 10px 적용 */

margin: 10px 20px; /* 값이 2개 - top, bottom은 외부 여백에 10px 적용 */
                   /*            left, right는 외부 여백에 20px 적용 */
                   
margin: 10px 20px 30px; /* 값이 3개 - top은 외부 여백에 10px 적용        */
                        /*            left,right는 외부 여백에 20px 적용 */
                        /*            bottom은 외부 여백에 30px 적용     */
                        
margin: 10px 20px 30px 40px; /* 값이 4개 - top(10px), right(20px)    */
                             /*            bottom(30px), left(40px)  */
                             /*            외부 여백에 적용          */
                                           
                                           
/* 요소의 외부 여백(공간)을 지정하는 기타 개별 속성들 */                                  
margin-방향(top, right, bottom, left): 값 

 

padding 속성 - 내부 여백

 

요소의 내부 여백(공간)을 지정하는 단축 속성, 요소의 크기가 커지는 특성을 가지고 있다

 

기본값(0) - 내부 여백 없음

단위 - px, em, vw 등 단위로 지정

% - 부모 요소의 가로 너비에 대한 비율로 지정

 

padding: 0; /* 내부 여백이 없는 상태 */

padding: 10px; /* 값이 1개 - top, right, bottom, left 내부 여백에 10px 적용 */

padding: 10px 20px; /* 값이 2개 - top, bottom은 내부 여백에 10px 적용 */
                   /*            left, right는 내부 여백에 20px 적용 */
                   
padding: 10px 20px 30px; /* 값이 3개 - top은 내부 여백에 10px 적용        */
                        /*            left,right는 내부 여백에 20px 적용 */
                        /*            bottom은 내부 여백에 30px 적용     */
                        
padding: 10px 20px 30px 40px; /* 값이 4개 - top(10px), right(20px)    */
                             /*            bottom(30px), left(40px)  */
                             /*            내부 여백에 적용          */
                                           
                                           
/* 요소의 내부 여백(공간)을 지정하는 기타 개별 속성들 */                                  
padding-방향(top, right, bottom, left): 값