상단과 측면에 대해 CSS 여백 간격이 다름

나는 여기에서 그런 질문을하는 것이 바보 같아서 누군가 나를 도울 수 있기를 바랍니다. 저는 웹 디자이너가 아니지만 기본 레이아웃을 만드는 작업에 매달 렸습니다. 레이아웃은 표준 브라우저가있는 통합 장치에서 사용되므로 브라우저 특정 CSS 태그 중 일부 (예 : -moz-border-radius)가 IE와 함께 작동해야하는 것은 아닙니다.상단과 측면에 대해 CSS 여백 간격이 다름

내가 몇 블록 섹션을 갖고 싶은 1024x768 페이지가 있습니다. 이 섹션은 모든면에 4px 공간을 갖습니다. 따라서 2x2 격자는 전체 사이트 외부에 4px 간격 (검정색)이 있어야하며 내부는 상자 사이에 8px 갭이 있습니다 (한 상자의 오른쪽에 4px, 왼쪽에 4px 또는 아래쪽의 4px 하나, 4px 상단에, 등)

내가 div의 CSS를 각각 margin : 4px로 설정하면 나는 4px의 외부 틈을 얻는다. 상자의 왼쪽과 오른쪽 사이에 8px의 가로 간격이 생깁니다. 문제는 수직 간격이 4px이며 1/4 상자 중 하나가 상단 또는 하단 여백을 적용하지 않는 것과 같습니다. 나는이 일이 일어날 것으로 생각하지 않는다. 그래서 나는 어딘가에서 실수를 저지른 것이라고 생각한다.

미리 감사드립니다 -이 장소는 정말 좋습니다.

출처

2010-11-18 David Houde

'margin collapsing'때문입니다. 가장 간단한 인접한 수직 마진은 무시됩니다.

출처

2010-11-18 23:18:21

빠른 답장을 보내 주셔서 감사합니다. 통찰력이 있다면 질문 2 아보를보십시오. 다시 한 번 감사드립니다! –

한 가지 옵션은 각 개체 주위에 투명 한 단일 픽셀 테두리를 적용하는 것입니다. 물론 변경 사항을 고려해야하지만 차원에 절대 값을 사용하는 경우 간단하게 해결할 수 있습니다. –

Btw, 좋은 참고 자료입니다. http://reference.sitepoint.com/css/collapsingmargins –

여백 대신 패딩을 사용해보십시오.

두 개체 사이의 가장 큰 여백이 두 개체 사이의 공백으로 사용됩니다.

4의 여유가 object_a 경우

및 object_b 6의 여유가있는 당신은, 나란히 배치하면, 그들은 당신이 패딩을 사용하는 경우가 더 생성 6.

의 마진을해야합니다 그들 주위에 거품이 생기고 거리가 결합됩니다. 감사 @Bobby하기 - 당신이, 나란히 배치하면

4의 패딩을 가지고 object_a 경우

및 object_b 6의 패딩을 가지고, 그들은 10

UPDATE의 패딩을해야합니다 잭

가로 여백은 결코 붕괴되지 않습니다. 세로 만.

출처

2010-11-18 23:19:42

빠른 답장을 보내 주셔서 감사합니다. 매일 새로운 것을 배웁니다. 내 레이아웃으로이 작업을 수행하는 가장 간단한 방법을 알고 계십니까? 여백을 사용하면 div 외부에 공간이 생깁니다. 패딩을 사용하면 div 내부에 공간이 생겨 차례대로 div가 4px 넓어집니다. 이 아이디어를 div의 중첩과 함께 사용하고 외부 div를 4px의 패딩으로 투명하게 유지하는 방법을 볼 수 있습니다. 나는 이것이 가장 우아한 방법인지 아닌지는 잘 모릅니다. 그냥 무언가를 놓치지 않는지 확인하고 싶습니다. –

여백 축소는 수직 여백에만 영향을 미칩니다. '나란히'라는 용어를 사용하면 다른 의미가있을 수 있습니다. –

@ Bobby - 정말요? 나는 그것의 결코 들어 본 적이 없다, 당신은 기사가 있습니까? 그것은 항상 저에게 영향을 준 것 같습니다. –

상단과 측면에 대해 CSS 여백 간격이 다름

답변

관련 문제