inset과 gap

inset과 gap

▶최근 CSS에서 자주 사용하는 코딩

▶top: 100px;

  left: 100px;

  right: 100px;

  bottom: 100px;

=

inset: 100px;

▶마진은 부모와 자식요소 사이에 거리를 주지만 gab은 요소와 요소 사이의 거리만 계산한다.

▶margin은 자식요소에 코딩, gap은 부모요소에 코딩

▶gap은 내부의 자식요소들이 일정한 간격으로 떨어져 위치 할 수 있도록 사용하는 스타일 속성이다.

 

▶margin과의 차이점은 gap의 경우 요소들의 사이에만 공간을 만든다는 점이다.

▶margin의 경우 주변에 요소들의 유무에 상관 없이 스타일이 적용(사이에는 중첩이 된다.)

▶EX) margin:10px;의 경우 중간에 겹쳐져 20px의 간격이 된다.

▶하지만 gap은 인접요소가 없다면 불필요한 공간을 만들지 않고 정확하게 간격을 10px만 만든다.

 

▶gap은 flex 이후부터 필요성이 생겨서 만들어진 속성이다. 불필요한 공간을 만들지 않아서 더욱 정렬된 상태의 레이아웃을 구현할 수 있기 때문에 사용하기 시작했다.

▶margin 전방향;

   margin 상하, 좌우;

   margin 상 좌우 하;

   margin 상 우 하 좌;

  gap 전체값;

  gap 상하 좌우;

  3,4개의 사용법이 없다.

gap : 10px

margin: 10px;