html & css/개념
박스모델
Doo Hee
2023. 11. 21. 14:24
박스모델
- 각각의 태그들이 웹페이지에 표현될때 그 태그의 부피감을 결정한다.
<!DOCTYPE html>
<html>
<head>
<style>
p,
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)는 적용되지 않는다.