CSS-margin,padding,border

강현구·2021년 11월 29일
0

HTML & CSS

목록 보기
5/7

요소의 여백 스타일을 할 때 margin과 padding을 사용할 수 있다.
margin, padding사이를 구분하는 border가 있다.

실제 요소가 차지하는 박스 영역의 너비는
요소의 너비 + 좌측 padding + 우측 padding + 좌측 border + 우측 border 이다.
border의 사이즈를 빼놓기 쉽고 계산이 번거로움이 있어 box-sizing이라는 프로퍼티를 주로 사용한다.

별도의 구분 없이 한줄에 사방의 사이즈를 정하는 경우에는
marging: top right bottom left
순서대로 사이즈가 입력된다. (top부터 시계방향)

border도 한줄로 속성 값을 넣는 경우에는 확정된 순서가 없지만
border: 두께, 선스타일, 선색깔
의 순서대로 넣는 것이 일반적이다.(coding convention)
선스타일은 다양한 것이 있으나 일반적으로 solid(실선)의 사용 빈도가 높다.
필요에 따라 텍스트의 밑줄로 쓰는 식의 활용도 가능하다.

profile
한걸음씩

0개의 댓글