상자는 컨텐츠, 내부여백, 테두리, 외부여백으로 구성 된다.
컨텐츠 - 텍스트, 이미지, 비디오, 오디오 등의 내용을 담는다.
padding - 컨텐츠 내부에 여백을 넣는다. 패딩은 색상 값을 가지지 않는 투명이다.
border - 컨텐츠와 내부 여백을 감싸는 테두리
margin - 외부 여백. 여백은 투명이다.
<div style="width: 300px; height: 150px; background-color: tomato;
padding: 20px; margin: 15px; border:5px solid #000;">
<p>폭300px 높이150px / 배경색 토마토 / 내부여백 20px / 테두리 5px / 외부여백 15px</p>
</div>
폭300px 높이150px / 배경색 토마토 / 내부여백 20px / 테두리 5px / 외부여백 15px
기본이 가장 익히기 어렵고 기본이 가장 많이 쓰인다.