CSS 박스모델 - padding, border

 

 

padding

padding: 10px; /* 네 면 모두 적용 */

padding: 10px 5px; /* 세로방향, 가로방향 */

padding: 10px 5px 20px; /* top, 가로방향, bottom */

padding: 2px 3rem 0 auto; /* 위 | 오른쪽 | 아래 | 왼쪽 (위 기준으로 시계방향)*/

   - 요소의 네 방향 안쪽 여백 영역을 설정합니다.

   - 사용방법은 margin과 거의 동일하게 사용합니다.

   - margin과는 다르게 collapsing이 발생하지 않습니다.

 

 

 

 

 

border

   - 요소의 margin과 padding사이 영역, 요소의 테두리입니다.

 

   border-style

      > border의 스타일을 지정해줍니다.

      > 여러 키워드가 존재하며, 가장 많이 쓰이는것은 solid (실선), dotted (점선), dashed ( 파선 )이 있습니다.

 

   border-width

      > border의 굵기를 지정해줍니다.

 

   border-color

      > border의 색상을 지정해줍니다.

 

   border(shorthand)

/* 스타일 */
border: solid;

/* 너비 | 스타일 */
border: 2px dotted;

/* 스타일 | 색 */
border: outset #f33;

/* 너비 | 스타일 | 색 */
border: medium dashed green;

      - 개별로 border의 속성을 입력해주어도 되지만, 대부분 border 단축속성을 사용하여 작성합니다.

      - 순서 상관 없이 border-style, border-width, border-color로 지정할 속성을 입력해주면 됩니다.

         > 하지만 가독성을 위해 통일성있게 순서를 정하는 것이 좋습니다.

 

   border-radius

border-radius: 10px;

/* 완전한 원 또는 타원형 */
border-radius: 50%;

/* top | right | left | bottom */
border-radius: 50px 10px 20px 5px;

/* top and bottom | left and right */
border-radius : 50px 30px;

      - border의 테두리를 둥글게 만들때 사용합니다.

      - 입력값을 반지름으로 삼는 원모양이 됩니다.

         > 전체 값의 절반만큼 설정하게 된다면 원모양이 됩니다.