HTML 의 inline 요소와 block 요소의 차이점과 예시

inline 요소와 block 요소의 차이점과 예시는?

block 요소는 화면의 한 줄을 전부 차지하는 요소 이고, inline 요소는 요소안에 내용 길이 만크만 너비를 차지 하는 요소 입니다.
block 예
<div>,<p>,<tabale>,<form>,<ul>,<h1> 등
inline 예
<span>,<a>,<strong>,<input>,<img> 등

block과 inline 특징

inline

• width, height 값을 줘도 안먹힌다.
• 내부에 블럭요소를 포함할수 없다.
• 인라인 요소를 css로 블럭화 할수 있다. (display:block) 또한 인라인요소와 블럭요소의 속성을 모두 갖는 속성으로 변경이 가능하다. (display:inline-block)
• line-height로 줄의 높낮이를 조절할 수있고 text-align 으로 텍스트 중앙, 좌우측 정렬을 할수 있다.

block

• width, height 값을 주면 먹는다.
• 내부에 인라인요소를 포함 할수 있다.
• 블록요소 다음에는 줄바꿈이 이뤄진다.
• 블록요소를 인라인 요소의 속성으로 변경 할수 있다. (display:inline),인라인요소와 블럭요소의 속성을 모두 갖는 속성으로 변경이 가능하다. (display:inline-block)