CSS : 상단 대 여백 상단

CSS : 상단 대 여백 상단

---

이 두 가지의 차이점을 완전히 이해하고 있는지 확실하지 않습니다.

누군가 내가 왜 다른 것을 사용하고 어떻게 다른지 설명 할 수 있습니까?

---

topposition속성 을 사용하여 요소를 조정하는 것입니다 .
margin-top이전 요소와 관련하여 요소까지의 외부 거리를 측정하기위한 것입니다.

또한 top위치 유형 absolute, relative또는 fixed. 에 따라 동작이 다를 수 있습니다 .

---

문서 흐름의 다른 요소에서 (블록) 요소를 멀리 이동하려는 경우 여백을 사용합니다. 즉, 다음 요소를 멀리 / 더 아래로 밀어 넣습니다. 인접한 블록 요소의 세로 여백이 무너짐에 유의하십시오.

당신이 주변 요소에 영향을주지 않습니다하는 요소를 원한다면, 당신은 위치 (복근., REL.)하고 사용하십시오 top, bottom, left및 right설정을.

함께 relative위치, 소자는 아직 정적으로 위치 된 경우와 같이 원래의 공간을 차지한다. 아무 일도 발생하지 왜 그냥에서 전환하는 경우 즉,의 static에 relative위치. 그런 다음 주변 요소를 가로 질러 밀어 넣을 수 있습니다.

함께 absolute그것이 차지하는 공간을 확보 할 수 있도록 위치, 당신은 완전하게 정적 문서 흐름에서 요소를 제거합니다. -하지만 당신은 자유롭게 배치 할 수있다 상대적으로 감싸 차선의 비 정적 위치 요소. 없는 경우 전체 페이지에 고정됩니다.

---

Margin은 요소의 일반 경계를 적용하고 확장 / 축소하지만 top을 호출 할 때 요소의 일반 위치를 무시하고 특정 위치로 플로팅합니다.

예:

html :

<div id="some_element">content</div>

css :

#some_element {margin-top: 50%}

요소가 컨테이너의 50 % 높이에서 html을 표시하기 시작 함을 의미합니다 (즉, "content"라는 단어를 표시하는 div는 div # some_element 바로 앞에 포함 된 div 또는 html 노드의 50 % 높이에 표시됨). 브라우저의 인스펙터 (Windows의 경우 f12, Mac의 경우 cmd + alt + i)를 클릭하고 요소 위로 마우스를 가져 가면 해당 경계가 강조 표시되고 요소가 재배치되지 않고 아래로 밀린 것을 볼 수 있습니다.

반면 상단 :

#some_element {top: 50%}

실제로 요소의 위치를 ​​변경합니다. 즉, 컨테이너의 50 %에 계속 표시되지만 요소의 위치가 변경되어 가장자리가 포함 된 요소의 50 %에서 시작됩니다. 즉, 요소의 가장자리와 컨테이너 사이에 간격이 있습니다.

건배!

---

바이트에서 :

"여백은 문자의 여백과 같이 요소 상자의 가장자리와 전체 상자의 가장자리 사이의 공간입니다. '상단'은 내부에있는 동일한 종이 조각과 같이 포함하는 블록 상자에서 요소의 여백 가장자리를 대체합니다. 골판지 상자이지만 용기 가장자리에 닿지 않습니다. "

내 이해는 margin-top은 요소에 여백을 만들고 top은 오프셋에서 포함하는 요소의 위쪽 가장자리 아래에 요소의 위쪽 가장자리를 설정한다는 것입니다.

여기에서 시도해 볼 수 있습니다.

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

차이를 확인하려면 top을 margin-top으로 바꾸십시오.

---

top속성은 위치 속성입니다. 그것은 사용되는 position등 재산, absolute또는 relative. margin-top요소의 고유 한 속성입니다.

참고 URL : https://stackoverflow.com/questions/4036176/css-top-vs-margin-top