inline
특징:
1.width/height 적용불가
2.margin/padding-top/bottom 적용불가
3.line-height를 원하는대로 사용할 수 없다
왜냐하면 text 크기만큼만 공간을 점유하고 (텍스트 만큼의 넓이와 높이)
연달아서 inline요소를 여러 개 붙인다면 줄바꿈 없이 서로 바로 옆에 위치하게된다.
The element doesn’t start on a new line and only occupy
just the width it requires. You can’t set the width or height.
the list of inline elements :<a> <abbr> <audio> (if it has visible controls) <b> <br> <button> <canvas> <cite> <code> <data> <datalist> <del> <em> <embed> <i> <iframe> <img> <input> <label> <map> <mark> <noscript> <object> <output> <picture> <q> <script> <small> <span> <strong> <sub> <svg> <template> <textarea> <time><u> <video>
block
block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용되며 벽돌처럼 쌓이는 느낌이다. 대표적인 태그는 div가 있다. 일반적으로 블록레벨 요소는 인라인요소나 다른 블록레벨
요소를 contain하고 있다.블록 레벨요소는 인라인요소보다 더 넓은 구조를 만든다.
특징:
1. 코드의 관점에서 봤을때 width값은 부모값의 100%이다.
2. 컨테이너로서 의미가 없는 논시멘틱 태그로서 많이 쓰인다.
The element will start on a new line and occupy the full width available. And you can set width and height values.
Generally, block-level elements may contain inline elements and (sometimes) other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
the list of block elements:<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption><figure> <footer> <form> <h1>-<h6> <header> <ul> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <video>
inlineblock
inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다.
기본적인 특징은 inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성가능)
inline속성에서 할 수 없었던 width/height 변경 및 line-height를 커스텀하게 적용할 수 있는 특징이 있다. inline의 요소를 갖고있으면서 블록의 성질을 추가한다.
아이템이자 상자의 역할을 할 수 있게 되었다고 생각하면 된다.
특징:
1. inline요소지만 블록레벨 요소처럼 width/height 변경 및 line-height를 맞추어 적용할수 있다는 점.
2. inline-block 끼리 공백이 생기게 되는데, 미리 상위 div에 { font-size: 0; } 를 적용해두어야 함
3. inline-block 끼리 높이가 안 맞는 경우 상위 공백이 생기게 되는데 vertical-align: top을 적용하면 해결 가능.
div{
display:inline-block
} 이렇게 디스플레이를 바꾸어주면 인라인속성과 블록성질을 전부 이용가능
