gap 속성과 margin 속성의 차이

Margin 

인접 요소와 상관 없이 항상 border 바깥에 여백을 둔다.

해당 엘리먼트에 적용된다.

 

margin,padding 등등 입문단계에서 다 배우는것이기에 설명 안함.

Gap

인접 요소가 없다면 적용되지 않는다.

말 그대로 요소와 요소 사이의 공백을 나타낸다.

 

내부 엘리먼트들에 적용된다.

 

컴퍼넌트에 배열 매핑해서 뿌려줄때 사용하면 좋다. 리턴되는 엘리먼트들이 간격을 갖고 배치됨.

//css
.containor {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            padding: 20px;
            gap: 20px;
            border: 1px gray solid;
          }

//jsx
..(생략)..
return (
    <div className="containor"> //여기에 gap속성이 반영된다.
      <Seo title="Home" />
      {movies ? (
        movies.map((movie) => {
          return (
            <div className="movie" key={movie.id}>
              <img src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} />
              {movie.original_title}
            </div>
          );
        })

아래 반영된 화면을 보면 각 <div className = "movie">태그들이 10px씩 간격을 두고 배치된다.

반영되는 화면

이전에는 grid 레이아웃에서만 사용 가능했지만 이젠 flex 레이아웃에서도 사용 가능