CSS 2.Box Model, margin, padding, border

Box 모델

• 크롬 개발자를 보면 확인할 수 있다.
• border, margin, padding, width, height 속성을 주로 설정
• 모든 요소에 존재
• Block과 Inline에 적용되는 Box 형태가 다르다.
• margin, border, padding 순으로 되어있다.
• margin : 다른 요소 또는 브라우저 경계선 간의 간격
• border : 테두리 영역
• padding : 테두리와 요소의 내용(컨텐츠) 사이의 간격
• 위 3가지는 top, bottom, left, right를 다로 지정해줄 수 있다.

Block 요소의 Box

• (기본값 기준)
• width : 브라우저 화면의 가로를 전부 사용하여 생성된다. 따라서 줄 바꿈이 일어난다.
• height : 내용의 높이만큼 생성된다.

Inline 요소의 Box

• width, height : 내부 컨텐츠에 맞게 생성된다.

적용 예시

<style>
    p, a{
        color:red;
        border: 5px solid;
        padding: 5px;
        margin-left : 5px;
        width : 200px;
        height : 150px;
    }
</style>