CSS에서 자동 너비 블록을 가진 타일의 여백

한 줄에 네 개의 블록이 있는 타일이 있다고 가정해 봅시다:

.child {
	width: 25%;
}

블록에 가로 및 세로 방향으로 백분율 여백을 추가해 보겠습니다:

.child {
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

지금까지 우리가 한 작업은 블록과 여백의 총 너비가 100%를 초과하기 때문에 제대로 작동하지 않을 것입니다. 올바르게 작동하려면 여백을 위한 공간을 마련하기 위해 각 블록에서 일부 부분을 잘라내야 합니다. 이 부분을 계산해 보겠습니다.

이 경우, 블록은 네 개이고 그 사이에는 1.5%씩의 세 개의 여백이 있습니다. 잘라낼 부분을 계산하려면 총 여백을 블록 수로 나누어야 합니다:

1.5% * 3 / 4 = 1.125

그러면 각 블록의 너비는 다음과 같습니다:

25% - 1.5% * 3 / 4 = 23.875%

결과 코드는 다음과 같습니다:

.child {
	width: 23.875%;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

이 여백을 직접 계산하지 않고, 계산 작업을 calc 함수에 맡길 수 있습니다:

.child {
	width: calc(25% - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

블록 너비도 calc 함수가 계산하도록 합니다:

.child {
	width: calc(100% / 4 - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

블록에 백분율 너비를 설정하여 한 줄에 세 개의 블록이 있고 그 사이에 3%의 간격이 있는 타일이 되도록 하세요.

블록에 백분율 너비를 설정하여 한 줄에 여섯 개의 블록이 있고 그 사이에 0.5%의 간격이 있는 타일이 되도록 하세요.

블록에 백분율 너비를 설정하여 한 줄에 네 개의 블록이 있고 블록 사이에 30px의 간격이 있는 타일이 되도록 하세요.

블록에 백분율 너비를 설정하여 한 줄에 다섯 개의 블록이 있고 블록 사이에 50px의 간격이 있는 타일이 되도록 하세요.