름름
inline요소 vs block요소 본문
항목 |
inline |
block |
inline-block |
영역 |
컨텐츠 크기만큼 |
widthd와 height지정값 지정값이 없을시 부모의 가로값, 세로는 컨텐츠크기 |
지정값 지정값이 없을시 너비 |
정렬 |
텍스트정렬에 영향을 받음 |
margin 과 padding table내부의 경우 vertical-align |
텍스트정렬에 영향을 받음 |
박스모델 |
margin 좌우, padding, border, float |
margin, padding, border, float |
margin(auto x), padding, border, float |
중첩요소 |
inline요소만 가능 |
inline과 block요소 모두가능 |
inline요소만 가능 |
특징 |
포지션이 텍스트와 유사하게 처리됨 |
양옆에 다른 요소가 올수없음 |
포지션이 텍스트와 유사하게 처리됨 |
엘리먼트 |
span, a, strong, em |
div, h1~h6, p, ul, li |
img, input |
'Tip' 카테고리의 다른 글
img 마우스 오버시 테두리 안쪽으로 주기 (0) | 2017.09.14 |
---|---|
div안의 img에 높이4px공백 (0) | 2017.09.13 |
폼태그 input 에서 id와 name (0) | 2017.01.13 |
글자생략 코드 (0) | 2016.12.19 |
텍스트 사이 세로라인 만들기 (0) | 2016.12.19 |
Comments