Block & Inline 요소

<Block level 요소 & Inline 요소>

1. Block 요소

- div, h1, p (주로 영역)

- width: 100% px , height: 0 px 시작(설정 안할시: 내용 size 만큼 자동)

- 크기(width, hegith)를 지정할 수 있다.

- 수직으로 쌓인다.

- margin, padding - <상 하 좌 우> 사용가능

- 주로 레이아웃에 사용

div {
  width: auto;  /* 100% */
  height: auto; /* 0 */
}

2. Inline 요소

- span, img

- width는 필요한 px 만큼만 사용 (width: 0px, height: 0px 시작)

- 크기(width, hegith)를 지정할 수 없다. (그냥 text size만큼만 지정된다.)

- 수평으로 쌓인다. (오른쪽으로 붙여서 사용하면 띄어 쓰기가 없다.)

- margin, padding - <좌 우>만 사용가능

- 주로 text에 사용

span {
  width: auto;  /* 0 */
  height: auto; /* 0 */
}

 

 

 

Inline 요소 -> Block 요소 변환시키기

• Block요소 -> Inline 요소로 변환시킬 경우 display: inline 하면 됩니다.