그리드에 영향을주지 않고 .container에 패딩을 추가하려고합니다. 내가 생각할 수있는 가장 좋은 예는 컨텐트가 .container의 측면에 부딪치지 않게하려는 것입니다. 왜냐하면 디자인에 파란색 배경이 있고 .container가 흰색이라면 왼쪽과 오른쪽에 패딩이 있기를 원하기 때문입니다. . 나는 문제를 풀기 위해 example page here을 빨리 만들었다.그리드 외부 컨테이너에 패딩 추가
기본적으로 20px짜리 구멍이있는 1000px 컨테이너를 만들려고합니다. 각 컨테이너는 65px를 차지합니다. 그리드 바깥 쪽에서 .container 안에는 왼쪽과 오른쪽 패딩도 20px가되어야합니다. 이것이 도움이되거나 상황을 악화시키는 지 확실하지 않지만 이것이 내 것입니다. Calca workout sheet for the grids
일반적으로 그리드 시스템은 여백 및 패딩과 관련된 상자 모델 계산의 문제를 극복하기 위해 box-sizing: border-box;을 사용합니다. CSS 트릭에서 http://www.paulirish.com/2012/box-sizing-border-box-ftw/
크리스 Coyier 너무 좋은 기사를했습니다 :
여기에 바로이 문제에 폴 아일랜드어로 좋은 기사입니다 http://css-tricks.com/box-sizing/이
깔끔한는 믹스 인은 현재 요소에 패딩을 적용 pad을 촉구했다 . 당신이 선언 한
은 outer-container 단지 pad 믹스 인을 추가하고 왼쪽과 오른쪽 값, 예를 들면 지정, left 매개 변수가 순서 top, right, bottom에있는 위의 예에서
#container {
@include outer-container;
@include pad(default 50px default 50px);
}
을 . 편리하게, 믹스 인은 default을받습니다. 그래서 당신이 상관하지 않는다면 상단과 하단의 기존 값을 알 필요가 없습니다.
그렇다면, 배경이 콘텐츠가 아닌 측면을 벗어나는 것을 방지하려면 패딩이 도움이되지 않습니다. 대신 여백을 고쳐야합니다.
자세한 정보를 제공해 줄 수 있습니까? 예, 일부 그리드 시스템은 박스 크기 조정을 사용합니다 : 일부 문제를 극복하기 위해 테두리 상자가 있지만 OP 문제를 해결하는 방법은 무엇입니까? 나는 같은 문제가있다. –