hi098123 Tistory Tip

width:100%와 display:block의 차이

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

 

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

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

 

어떤 차이일까?

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

 

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

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

width:100%와 display:block의 차이

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

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

 

'티스토리 > CSS' 카테고리의 다른 글

CSS Selector로 외부링크 선택하기  (0) 2020.08.28
드래그 색상 바꾸기  (1) 2020.08.05
티스토리 "분류 전체보기" 지우기  (0) 2020.08.03
CSS 색상 변경하기  (0) 2020.07.31
크롬 input 테두리 제거하기  (0) 2020.07.31

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

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

댓글 0개