Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what is the width and height of the CSS element". In daily operation, I believe that many people have doubts about the width and height of the CSS element. The editor consulted all kinds of data and sorted out a simple and easy-to-use method of operation. I hope it will be helpful for you to answer the question of "what is the width and height of the CSS element?" Next, please follow the editor to study!

Do not use the CSS3 box-sizing attribute

By default, the width and height of an element are calculated as follows:

Width (width) + padding (inner margin) + border (border) = actual width of the element

Height (height) + padding (inside margin) + border (border) = actual height of the element

This means that when we set the width/height of the element, the actual height and width of the element will be larger (because the border and inner margin of the element will also be calculated in the width/height).

Case study

.div1 {

Width: 300px

Height: 100px

Border: 1px solid blue

}

.div2 {

Width: 300px

Height: 100px

Padding: 50px

Border: 1px solid red

}

In this way, if you want to get the smaller box and include the inner margin, you have to consider the width of the border and the inner margin.

The box-sizing attribute of CSS3 solves this problem very well.

At this point, the study on "how to calculate the width and height of CSS elements" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.