블럭과 인라인

블럭(Block) : 옆에 다른 요소가 올 수 없는것.

블럭의 유용한 특징 세가지 : margin, padding, border

 

margin : box의 경계의 바깥에 있는 공간, 속성값이 하나이면 사방이 모두 적용된다는것이고 속성값이 두개면 순서대로 상하, 좌우를 의미한다.. ex) margin: 20px 15px; < 상하 20px 좌우 15px

만약 4개의 값을 준다면.. ex) margin : 20px 5px 12px 9px;

순서대로, 위, 오른쪽, 아래, 왼쪽 (시계방향) 순서대로 적용된다.

 

padding : 경계로부터 안쪽에 있는 공간

 

border : box의 경계를 의미한다. 쉽게 말하면 테두리? style도 여러종류가있지만, 주로 solid를 많이 사용하는 편

속성은 width, style, color 를 줄수있다.

ex) border : 2px solid black;

 

 

인라인(inline) : 옆에 다른 요소가 올 수 있는것.

width와 height 를 가질수 없다!

너비와 높이를 가질수 없기때문에 위, 아래에 margin을 가질수 없다.

padding값은 사방에 모두 가질 수 있다. 만약 위 아래에 margin을 주고싶을경우,

inline 요소들을 block 요소로 바꿔줘야한다.