block요소와 inline요소 구분하기

block요소

h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd, header, footer, section, article, nav, div 등
block요소는 그 줄에 자기 자신만 존재할 수 있다 (좌우에 다른 요소를 오지 못하게함 - 넓이를 제한해도 좌우에 다른것이 오지 못함)
자동줄바꿈이 된다(좌우에 다른 요소를 배치하지 못하기 때문)
해당 요소의 넓이를 100%가 되도록 한다 (물론 넓이를 css에서 제어할 수는 있다)

ul태그

html은 <ul> <li> <a href=""> </a> </li> <li> <a href=""> </a> </li> </ul> <-- ul는 물론 li도 block태그이므로 위아래로 배치됨. -->

strong, em, a, img, span 등
inline요소는 그줄에 다른 요소도 존재할 수 있음.
inline요소 때문에 줄바꿈이 되지는 않음 (물론 css에서 block요소로 변경하면 줄바꿈됨)
width값이 없음, 콘텐츠가 존재하는 만큼만 넓이를 갖음
inline 태그 안에는 block 태그를 사용할 수 없음 ( <a href=""> 문장 </a> - 이렇게 사용 불가)
inline요소는 padding, width, height 값이 적용되지 않음 ( display:inline-block; 으로 속성을 변환해야 값이 적용됨.)

strong태그 em태그 span태그

html은 csss는

strong,
em,
span{
    border: 1px solid #ddd;
    background:#f4f4f4;
    padding: 5px 20px;
    display: inline-block;
}

/* padding값을 적용하기 위하여 display:inline-block; 값을 추가함. */