인라인 블록 div 및 해당 "여백"CSS 속성 이해

이미지를 자르고 센터링하기 위해이 code을 이해하려고합니다.인라인 블록 div 및 해당 "여백"CSS 속성 이해

나는 내가 가장 이해했다고 생각하지만, 나는이 필요한 이유는 아직 파악하고 있지 않다 :

.img-crop img{ 
    /* removes(sorta) image from the flow */ 
    padding-left: 100%; 
    margin: -100% -100%; 
}

내가 margin: -100% -100% 모두 수직 및 수평으로 이미지를 중심입니다 생각하지만, 이유를 그것은 컨테이너의 왼쪽에 위치합니다. (따라서 : 왜 패딩이 필요합니까 - 왼쪽 : 100 %)?

2013-08-23 Bertuz

참고 - 여백 : -100 % -100 %는 여백과 동일합니다. -100 % – Huangism

원래 예제에서 그 값은'margin : -999em -100 %'이었지만 약간의 테스트를하고있었습니다. [여기는 원래 예입니다] (http://dabblet.com/gist/4711695) – Bertuz

참으로 저는 이것을 보았습니다. 코드에서 바로 잡아야합니다.이 경우 -100 %와 비교하면 -999em은 다릅니다. 소지품 – Huangism

나는 그것이 어떻게 작동하는지 알 것 같아요. here 처음부터 새로 작성한 예를 찾을 수 있습니다. image은 div으로 바뀌었지만 모두 inline-block으로 표시 되었기 때문에 마지막 하나는 높이를 변경하고 재생할 때 편리합니다.

DOM을 많이 조작하기 위해 jquery를 사용하고 싶지 않으면 매우 유용하다고 해봅시다. Css 규칙 집합에서 자르기 및 센터링.

2013-08-23 22:53:05 Bertuz

답변