CSS 자식노드를 일정 간격 띄워서 배치 (inset)

개요

inset은 태그 요소의 위치를 결정하는 top, right, bottom, left의 축약 스타일 속성이다. 즉 상하좌우를 각각의 css 속성으로 설정하지 않고 inset 하나만 사용하는 것이 가능하다. 사실 inset을 사용하지 않더라도 top, right, bottom, left 등을 사용할 수 있다.

문법

inset(상 우 하 좌);
inset(상하 좌우);
inset(상하좌우);

• margin, padding과 같이 축약식 선언을 사용할 수 있다.

활용사례

top, right, bottom, left사용

div {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

inset사용

div {
  position: absolute;
  inset: 20px;
}