CSS Reference

CSS Block/Inline

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다.

{
    <p style="border: 3px solid red">
        p요소는 display 속성값이 블록인 요소입니다.  
    </p>
}

{
    <div>, <h1>, <p>, <ul>, <ol>, <form> 요소는 대표적인 block 요소입니다.
}

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.

 {   
    <span style="background-color:grey; color:orange">span태그</span>는 display 속성값이 인라인인 요소입니다.      
}

{
    <span>, <a>, <img> 요소는 대표적인 inline 요소입니다.
}