e:I[50313,["1345","static/chunks/1345-9cce9003361149c3.js","1252","static/chunks/1252-ebd18985bba615a5.js","6457","static/chunks/app/post/%5Bid%5D/page-f10e08b3d78367ee.js"],"default"] f:T7d8,$$config title: [HTML/CSS] CSS - 그리드 내부 여백 생성 방법 2 (w. 음수 margin 활용) keywords: - CSS - 그리드여백 $$ #음수 마진을 활용한 방식 = 전통적인 그리드 내부 여백 생성 방법을 개선한 방식 --- # 음수 마진을 활용하여 그리드 내부 여백 생성 - inline-grid를 사용하기 때문에 `padding : 0 10px` 을 줘서 안쪽 여백을 만들어 내기 - 처음과 끝에 생성된 여백을 제거하기 위해서 음수마진을 활용 => 음수마진을 활용하기 위해서 img들을 하나의 `부모박스 필요` - `부모 박스의 양옆 마진을 음수마진`으로 없애기 (margin : 0 -10px) # 주의 사항 - 음수마진을 하기 위해선 줄여야 하는 여백을 계산하긴 해야 함 --- 예제 : html ```html

``` css ```css body { margin:0; } .con { width:1200px; margin-left:auto; margin-right:auto; background-color:#afafaf; padding-bottom:100px; } .inline-grid { font-size:0; } .inline-grid > * { font-size:1rem; vertical-align:top; display:inline-block; box-sizing:border-box; } .box-1 { margin:0 -20px; background-color:#787878; } .box-1 > img { width:calc(100%

게시글 상세