block 요소 inline요소

1. block 요소

• 높이와 너비 값을 가질 수 있다.
• 위에서 아래로 나열된다. (가로 100% 차지) 
• padding 값을 줄경우  padding 크기 만큼 커진다.  
  (**box-sizing:border-box; 속성을 함께 적용한 경우 예외)
• block과 inline, inlien-block 요소를 자식요소로 할 수 있다.
• <p> 태그는 <p>태그를 자식으로 가질 수 없다. 
• <h> 태그는 block 요소를 자식으로 가질 수 없다. 

1-1: block 태그 종류 
<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <ul>, <video>

2. inline 요소

• 높이와 너비 값을 가질 수 없다. 
  예외 : img 태그는 높이와 너비 값을 가질 수 있다.
• 콘텐츠에 딱 맞는 값을 가진다. 
• 가로로 나열된다. (오른쪽에서 왼쪽)
• 가로 여백만 허용된다.
• 패딩을 설정할 수 있지만, 가로 패딩에 대한 너비값은 갖지만 상하 패딩에 대한 높이값을 갖지는 못한다. 
• 자식요소로  block요소를 가질 수 없다.
  예외:  a 태그는  block 요소를 자식 태그로 할 수 있다.
  ex) <a href="#">
           <div>
                 <h3>제목</h3>
                  <p>내용~~~~</p>
           </div>
       </a>

2-1: inline 태그 종류
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br/>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <small>, <script>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt>, <var>

3. inline-block 요소

• block 태그와 inline 요소의 성질을 모두 가짐
  - display:inline-block; 로  inline요소와 block 요소의 속성을 inline-block 으로 변경 할 수 있다.
  - 속성을 변경한다고 inline이 block를 자식 요소로 둘수는 없다. 
• 너비와 높이 값을 가질 수 있다. (padding 포함)
• 상하 마진 값을 가질 수 있다. (마진 상쇄가 일어나지 않는다.)
• inline요소 처럼 배치 된다. 
• <input> 태그는 요소의 기본 크기를 가지고 있으면서 가로로 배치된다.
• <img> 태그는 이미지의 크기를 가지면서 가로로 배치된다.

마크업 검사: The W3C Markup Validation Service