css display: block(div p form ol ul h1~6 table...) vs inline(span a img button input...)

• display: block, 설정안하면 width는 부모로부터 받은 넓이를 다 사용, height는 자식꺼(height:100%일때)? 
  • full width available -> stretches out to the left & right as far as it can
  • starts on a new line -> vertical, 시작지점은 바로 앞 형제가 끝나고 바로 시작, 형제 안에 자식이 길거나 해도 무시함

    <div style="height:100px;">
    	<div style="height:500px;">
        </div>
    </div>
    <div>... -> 100px 끝나고 시작, 내부 자식이 500px짜리 있지만 무시함​​

     
  • example
    • <div>
    • <p> paragraph
    • <h1>~<h6> heading
    • <form>
    • <ol> ordered list
    • <ul> unordered list
    • <header><main><nav><footer>
    • <table>
• display: inline, width/height설정할수 없고 설정해도 효과없음, color/fontweight등은 설정가능
  • for text
  • horizontal
  • example
    • <span>
    • <a>
    • <img>
    • <button>
    • <input>
    • ...
• display: inline-block, inline이지만 width/height만 설정가능
• display: table
• display:flex

 

block level element와 inline level element의 차이에 대해 설명되어 있음

https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-p-div-span-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

🏷️ 비슷해 보이는 <p> <div> <span> 태그 차이점