Many web pages use box model to organize the web content. For example, when I inspect MDN homepage, I see there are box shapes on the page. Some boxes are visible, but some boxes are invisible. No matter those boxes are visible or invisible, the main purpose to use box model is to let the web page have an appropriate layout, which allow users to catch the clear information and easy to read. What Is The Box Model? According to MDN, in a document, each element is represented as a rectangular box. In CSS, each of these rectangular boxes is described using the standard box model. Each box has four edges: margin, border, padding and content edge. From MDN Content: The content of a CSS box is where the text and images appear. The "width" and "height" properties set the width and height of content box. Padding: Padding refers to the inner margin of a CSS, and it is transparent. The properties include padding-top, padding-right, padding-botto...