CSS의 margin, paddilng, position 간단 설명

margin

margin속성은 정의된 테두리 외부의 요소 주위에 공간을 만드는 데 사용됩니다.

CSS를 사용하면 여백을 완전히 제어할 수 있습니다. 요소의 각 측면(위, 오른쪽, 아래, 왼쪽)에 대한 여백을 설정하는 속성이 있습니다.

 

CSS에는 요소의 각 측면에 대한 여백을 지정하는 속성이 있습니다.

• margin-top
• margin-right
• margin-bottom
• margin-left

margin속성에 4개의 값이 있는 경우 :  시계방향으로 값이 줄어들 때 모든 여백으로 적용 된다.

• 여백: 25px 50px 75px 100px;
  • 상단 여백은 25px입니다.
  • 오른쪽 여백은 50px입니다.
  • 하단 여백은 75px입니다.
  • 왼쪽 여백은 100px입니다.
• 여백: 25px 50px 75px;
  • 상단 여백은 25px입니다.
  • 오른쪽 및 왼쪽 여백은 50px입니다.
  • 하단 여백은 75px입니다.
• 여백: 25px 50px;
  • 상단 및 하단 여백은 25px입니다.
  • 오른쪽 및 왼쪽 여백은 50px입니다.
• 여백: 25px;
  • 네 여백은 모두 25px입니다.

 

모든 여백 속성은 다음 값을 가질 수 있습니다.

• auto - 브라우저가 여백을 계산합니다. 요소를 가로로 가운데, 왼쪽과 오른쪽 여백 사이에 균등하게 분할됩니다.
• 길이 - 여백을 px, pt, cm 등으로 지정합니다.
• % - 포함하는 요소 너비의 %로 여백을 지정합니다.
• 상속 - 여백이 부모 요소에서 상속되어야 함을 지정합니다.

팁: 음수 값이 허용됩니다.

 

padding

padding속성은 정의된 테두리 내부의 요소 콘텐츠 주위에 공간을 생성하는 데 사용됩니다.

margin과 속성이 같습니다

 

 

position

position속성은 요소에 사용되는 위치 지정 방법의 유형(정적, 상대, 고정, 절대 또는 고정)을 지정합니다 .

 

position속성은 요소에 사용되는 위치 지정 방법의 유형을 지정합니다 .

5가지 다른 위치 값이 있습니다.

• static
• relative
• fixed
• absolute
• sticky

그런 다음 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 사용하여 배치됩니다. position 그러나 이러한 속성은 속성을 먼저 설정 하지 않으면 작동하지 않습니다 . 또한 위치 값에 따라 다르게 작동합니다.

 

position: static은 top, bottom, left, right 속성의 영향을 받지 않습니다.

 

position: relative;는 정상 위치를 기준으로 배치됩니다.

상대적으로 배치된 요소의 top, right, bottom, left 속성을 설정하면 원래 위치에서 멀어지게 조정됩니다. 다른 콘텐츠는 요소에 의해 남겨진 간격에 맞게 조정되지 않습니다.

 

position: fixed;는 뷰포트에 상대적으로 위치하므로 페이지가 스크롤되더라도 항상 같은 위치에 유지됩니다. top, right, bottom, left 속성은 요소의 위치를 ​​지정하는 데 사용됩니다.

고정 요소는 일반적으로 위치했을 페이지에 공백을 남기지 않습니다.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

 

position: absolute;는 가장 가까운 위치에 있는 조상을 기준으로 배치됩니다(고정처럼 뷰포트를 기준으로 배치되는 대신).

하지만; 절대 위치 요소에 위치 지정 조상이 없으면 문서 본문을 사용하고 페이지 스크롤과 함께 이동합니다.

참고: 절대 위치 요소는 일반 흐름에서 제거되며 요소와 겹칠 수 있습니다.

다음은 간단한 예입니다.

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

 

position: sticky;는 사용자의 스크롤 위치를 기준으로 배치됩니다.

고정 요소 는 스크롤 위치에 따라 relative및 사이를 전환합니다. fixed주어진 오프셋 위치가 뷰포트에서 만날 때까지 상대적으로 배치된 다음 제자리에 "고정"됩니다(예: position:fixed).

 

 

링크의 html 영역을 먼저 설명하고

margin은 정의된 테두리 밖의 공간을 만드는 데 사용되고,

padding은 정의된 테두리 안의 콘텐츠 주위에 공간을 만드는데 사용되고,

position은 원하는 곳에 타입을 정해 지정합니다 .

그중 sticky는 스크롤을 따라다니기 때문에 웹사이트 장바구니나 cs부분에 사용하기 좋을것 같습니다

 

 

https://enai.tistory.com/49

https://www.w3schools.com/css/css_positioning.asp