{ 태그에 닫는 태그가 없습니다. error :325 border만큼 크기가 커지는 문제 해결법 (외곽선을 내각선으로 변경)

HTML/CSS

CSS border만큼 크기가 커지는 문제 해결법 (외곽선을 내각선으로 변경)

외곽선인 border속성을 아래 소스와 같이 넣으면 가로 사이즈가 100px이지만 110px로 변하는것을 볼 수 있습니다.


div {

	width: 100px; height: 100px;

	border: 5px solid red;

}


그래서 여태까지는 100px 사이즈의 박스를 만드려면 크기 90 + 외곽선 10으로 조절해야 했습니다. 그리고 가로 100% 사이즈가 잡혀있는 엘리먼트에서 padding이나 border가 들어가있으면 100%사이즈를 넘어버리는 대책없는 현상이 나타나버립니다.
하지만 box-sizing 속성 덕분이 이런 고민들이 깨끗하게 해결되었습니다. border나 padding값이 들어가도 사이즈에 영향을 받지 않습니다.

- 예제소스


div {

	width: 100px; height: 100px;

	border: 5px solid red;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}


- 모두 다 적용하고 싶다면...


*, *:after, *:before {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}



주의할점이 하나 있는데 이 속성은 ie8버전에서부터 지원합니다.
게시글 공유 URL복사
출력
목록
댓글작성

열기 닫기

댓글작성

prev 이전글
브라우저 개발자 도구를 활용하여 문제점을 쉽게 찾을 수 있는법
next 다음글
css를 처음 접하는 분께 권하는 사이트
top