Css3 | 넓이에 border값 포함 시키기 box-sizing

무료아이콘 전체게시물 작성일17-07-25 07:48 조회2,276회

본문


넓이에 border값 포함 시키기 box-sizing

 

width값이 200px인 div에 border에 3px를 줄 경우

 

브라우저에서는 width가 200px가 아닌 206px로 보여지는데

width 200px 에 border가 들어가게 하는 방법이 box-sizing 네요

 

 

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

 

------------------------------------------------------------

box-sizing: content-box
     CSS 표준에 정의되어 있는 기본값이다.
     width height 속성은 컨텐츠만 포함하며, padding, border, margin 은 포함하지 않는다.

box-sizing: padding-box
     width height 속성이 padding 을 포함한다. border, margin 은 포함하지 않는다.

box-sizing: border-box
     width height 속성이 padding, border 를 포함한다. margin 은 포함하지 않는다.
     이 값은 IE Quirks mode 의 구현과 동일하다.

 

------------------------------------------------------------ 

 

 

링크를 참고하세요. ie8이상 지원하며 링크1에 마지막 부분에 ie7까지도 가능하게 하는 방법이 있는 거 같네요

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 19 비추천 0

댓글목록

무료아이콘님의 댓글

무료아이콘 전체게시물 작성일

익스7이 문제네 ㅠㅠ 익스 7에서는 border-box를 해줘도 기존 크기 200에서 패딩 20을 줘버리면 240이 됨 후아아악...

Css + Html

103개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 새글 무료아이콘 전체게시물 07-17 5 추천: 0
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1092 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1170 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 763 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 1734 추천: 15
98 부트스트랩 부트스트랩 특정 해상도에서만 보이게 하거나 숨기기 무료아이콘 전체게시물 01-10 1640 추천: 17
97 부트스트랩 그리드간에 길이가 틀려 그리드끼리 겹칠 때 무료아이콘 전체게시물 01-09 1047 추천: 12
96 부트스트랩 부트스트랩 label 스타일 추가하기 무료아이콘 전체게시물 01-09 1657 추천: 18
95 부트스트랩 부트스트랩 nav-tabs 스타일바꾸기 무료아이콘 전체게시물 01-08 1493 추천: 18
94 부트스트랩 부트스트랩 토글메뉴바외 다양한 기능 bootsnipp 관련링크 무료아이콘 전체게시물 01-03 703 추천: 10
93 jQuery/java 화면,페이지 접속시 페이드인 효과주기 무료아이콘 전체게시물 11-09 2535 추천: 14
92 etc 익스플로러 8에서 positon:fixed; 사용시 무료아이콘 전체게시물 10-27 2435 추천: 12
91 etc 마크업 성능 검사 w3c 관련링크 무료아이콘 전체게시물 08-01 829 추천: 12
90 etc px,em,%,pt 단위 변화 계산 관련링크 무료아이콘 전체게시물 08-01 1313 추천: 11
89 etc CSS2 규격 한글 번역문 관련링크 무료아이콘 전체게시물 07-31 1186 추천: 12
게시물 검색