Learn HTML & CSS. 10.Content(Padding, Margin)

Review what I learned

1. Padding 은 박스의 테두리와 내부 컨텐츠 사이의 공간 크기이다.


2. Padding 은 모든 방향을 똑같이 설정하거나, 각각을 따로따로 설정할 수 있다.


3. Margin 은 박스의 테두리와 그 외부 컨텐츠 사이의 공간 크기이다.


4. Margin 도 역시 모든 방향을 똑같이 설정하거나, 각각을 따로따로 설정할 수 있다.
   
   
5. Padding 와 Margin 의 설정 방법은 동일하고, Padding과 Margin만 바꿔주면 되므로 하나로 설명한다.
   
   

1.	모든 방향 똑같이 설정	padding: 10px;
2.	각 방향 다르게 설정	padding: 5px 3px 5px 2px; (위 오른쪽 아래 왼쪽)
3.	개별로 설정	padding-top: 5px; (padding-right, padding-bottom, padding-left)




6. display 속성은 HTML 태그들이 어떻게 보여질 지를 정해준다. (직접 적용해 보는 것이 알기 편함)
   
   • inline : 블록 단위로 보여주는 태그들을 줄 단위로 보여주게 한다.
   • block : 줄 단위로 보여주는 태그들을 블록 단위로 보여주게 한다.
   • inline - block : 블록 단위로 보여주는 태그들의 블록 단위의 특징은 유지한 채 줄 단위로 보여주게 한다.
   • none : 해당 태그를 보여주지 않는다. 해당 페이지는 이 태그가 없는 것처럼 보여지게 된다.


7. visibility 속성은 해당 태그를 숨겨줄 수 있다. 하지만 해당 태그가 있는 자리는 빈 칸으로 유지된다.
   (내용이 보이지 않을 뿐, 자리는 유지) (자리마저 없애려면 display 속성 사용)

출처 : codecademy(HTML & CSS)