티스토리 뷰

CSS

box-sizing

placidcy 2022. 4. 17. 17:12

박스의 크기를 어떤것을 기준으로 계산할지를 정하는 속성

 

1. content-box : 요소의 영역을 기준으로 결정한다

2. border-box : 테두기 영역을 기준으로 설정한다

<style>
        body {
            margin: 0px;
        }

        div {
            margin: 20px;
            padding: 20px;
            border: 20px solid #dddddd;
            width: 500px;
        }

        .content-box {
            box-sizing: content-box;
        }

        .border-box {
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="content-box">
        <p>content-box
    </div>

    <div class="border-box">
        <p>border-box
    </div>
</body>

 

'CSS' 카테고리의 다른 글

column-count  (0) 2022.04.17
caption-side  (0) 2022.04.17
white-space  (0) 2022.04.17
z-index  (0) 2022.04.17
align-self  (0) 2022.04.12

UP NEXT : CSS

댓글
© 2018 webstoryboy