width:100%와 display:block의 차이

hi098123 2020. 8. 2. 00:31

width:100%, display:block CSS를 조금 배운 초보라면 둘의 차이를 알기 어렵다.

그러나 이 둘은 확연히 다릅니다.

display:block으로 설정해야될 곳에 width:100%를 사용하면 사이즈가 초과되곤 한다.

어떤 차이일까?

설명을 위해 그림을 그려봤다.

width:100%는 내용에 초점을 맞춰 크기를 조절하는데 padding, border등 주위의 값은 계산하지 않는다.

display:block은 부모에 맞추게 되는데 padding, border에 영향을 받아 내용의 크기가 조절된다.

그림에서 회색은 border, 연두색은 padding을 의미합니다.

검은 상자는 부모 div를 의미한다고 보면 좋을것 같습니다.

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 한 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.

링크 공유는 가능합니다. 만약, 본문 공유 시 링크 공유를 해주세요