박스모델

박스모델

- 각각의 태그들이 웹페이지에 표현될때 그 태그의 부피감을 결정한다.

<!DOCTYPE html>

<html>

<head>

<style>

a {

/* border-width: 10px;

border-style: solid;

border-color: red; */

border: 10px solid red;

padding: 20px;

margin: 40px;

width: 200px;

}

</style>

</head>

border (경계선)

- border: 의 형태로 두께, 스타일, 색상을 한번에 지정할 수 있다.

padding

- 요소와 요소 사이의 간격

margin

- 콘텐츠와 경계 사이의 간격

* inline 요소에서 너비(width)와 높이(height)는 적용되지 않는다.

Frontend repository!