5. BOX Model -(1)

1. box model 

2. margin, padding

• margin : 요소 주위의 여백 = 테두리 밖의 공간
• padding: 내용과 테두리 사이의 여유공간

A. padding 주는 방법

-> 직관적인 방법 : 

p {
  border: 1px solid blue;
  padding-top: 20px;
  padding-bottom: 40px;
  padding-left: 120px;
  padding-right: 60px;
}

-> 한줄에 쓰는 방법  : 위(padding-top) 부터 시계 방향으로 하나씩 쓰면 됨

p {
  padding: 위 오른쪽 아래 왼쪽;
}

-> 위, 아래, 오른쪽, 왼쪽 이 다 같은 경우 : 

p {
  border: 1px solid blue;
  padding: 50px 100px;
}

3. width, height

=> width와 height을 통해 가로 길이, 세로 길이를 설정

=> 이미지도 css에서 설정 가능 

A. 최소(min-width), 최대 가로(max-width) 길이 설정 가능

.p2 {
  border: 1px solid red;
  max-width: 200px;
}

.p3 {
  border: 1px solid blue;
  min-width: 2000px;
}

.p1 {
  border: 2px solid #4d9fff;
}

.p2 {
  border: 2px dotted #4d9fff;
}

.p3 {
  border: 2px dashed #4d9fff;
}

.p1 {
  border-style: dotted;
  border-color: red;
  border-width: 5px;
}