앱 위젯과 동일한 것 같다!

margin

margin-top: 10px
margin-right: 20px
margin-bottom: 30px
margin-left: 40px

이렇게 각각 따로 마진을 설정해 줄 수 있고

margin: 10px 20px 30px 40px 

이렇게 설정할 수도 있다.

margin: 10px 20px  

얘는 플러터로 따지면 Edgeinsets.symmetric(vertical: 10px horizontal: 20px) 이런 느낌

margin : 10px 20px 30px 

얘는 차례로 위 오른쪽 아래 (왼쪽은 오른쪽과 같이 따라감)

*인라인 요소는 margin top과 bottom을 정의할 수 없다. 생각해보면 그런 것 같다.

padding

마진과 비슷하다!

border

border-width: 1px
border-style: solid;
border-color: red 

border: 1px solid red; 굵기, 굵기 종류, 색깔
//단축속성으로 이렇게 보통 쓴다.

margin처럼 특정 방향만 정해줄 수 있다.

기타

width: 100px //컨텐츠 영역의 넓이를 100px로 하겠다
height: 100px //컨텐츠 영역의 높이를 100px로 하겠다

display: inline
display: block
display: inline-block 
요소의 성격을 다음과 같이 바꿔준다

display: flex
display: grid
//얘네 둘은 추후에 다루겠다

box-sizing: content-box
설정한 width와 height 값이 곧 요소 내부의 콘텐츠 크기

box-sizing: border-box
설정한 width와 height 값이 안쪽 여백과 테두리까지 포함

border-box가 요소의 사이즈를 맞추는 것이 보다 용이하다.

마진 겹침 현상

요소와 요소 사이에 margin-top 또는 margin-bottom이 겹칠 경우 더 높은 값의 margin 값이 적용되는 현상. 블록요소에서만 일어난다.

형제간, 부모 자식간에도 일어난다.

이를 방지하는 방법은 다음과 같다.

1. 부모 요소에 padding 추가
   부모 요소에 padding-top이나 padding-bottom 값을 추가

2. 부모 요소 / 겹치는 형제요소 중 하나에 overflow: hidden을 설정

3. 부모 요소 / 겹치는 형제요소에 border 값 주기
   이는 무의미한 border값이 생길 수 있다.

4. 부모 요소에 flex나 grid 주기
   부모 요소에 display: flex나 grid를 주는 경우도 가능

5. 겹치는 요소에 display: inline-block을 설정
   요소가 인라인 성격을 가지기 때문에 블록요소에서만 일어나는 마진겹침이 일어나지 않는다.