CSS(Cascading Stylesheets) > Inline , block

오늘의 끄적끄적

1. CSS 

display : inline, dispaly : block 속성

block - 한줄에 나열하지 않고 그 자체를 한줄로 표현  (자연 스러운 줄 넘김이 가능 )<p> 태그

-> margin,width,height 속성이 정의 가능 

 ( 기본적으로 width 가 100%)

inline 줄을 바꾸지 않고 다른요소와 하께 한 행에 위치하려는 성향 <a> 태그

-> margin-top,margin-bottom 속성을 정의해도 적용 X  

상하 여백은 line-height 속성에 의해 발생 

width 와 height 속성이 적용되지 않음 

-> inline 너비와 높이는 태그가품고 있는 내부 요소의 부피에 맞춰집니다.

최소한의 간격을 유지하기 위해서 연속으로 사용된 경우는 5px의 내부 margin 이 자동 발생

(웹 브라우저의 기본 설정 때문)

inline-block 

margin-top,margin-bottm 정의 가능 상하 여백을 margin , line-height 를 모두 제어가능

width 와 height 정의 가능

기본적으로는 태그가 품고있는 내부 요소에 의해 부피가 맞춰짐

inline-block 끼리 사용시에는 최소한의 간격을 유지하기 위해서 좌, 우 약 5px 가량의 외부 여백이 발생

margin-left margin-right 를 사용시에 여기에 추가로 여백을 줄수 있음