공부/HTML

[HTML5] CSS Box 모델과 배치 이해하기 - Margin, Border, Paading, Contents 실습

JangGiraffe 2015. 1. 15. 18:56

여백(margin)은 구성요소 외부의 영역이다.

테두리(border)는 구성요소를 둘러싸고 있는 것을 말하고 테두리는 다양한 형식 너비와 색깔을 갖는다.

패딩(padding)은 콘텐츠 주위에 존재하며 콘텐츠 영역의 배경색을 상속받는다. 테두리와 콘텐츠 사이에 존재한다.

콘텐츠(content)는 패딩 내부에 존재한다. 여기에 알짜배기?가 표시된다.

 

 

margin : 20px 50px 10px 5px; 의 결과값.
margin : A    - 상하좌우의 여백을 A로 지정

margin :A B - 상하의 여백을 A로 좌우의 여백을 B로 지정

margin : A B C D - A: 상 B:우 C:하 D:좌의 여백으로 각각 지정함.

padding도 이와 같다.

반응형