CSS box model

 CSS box model is also called block model. The so-called box model is actually the evolution of the traditional HTML block concept. Suppose we use a DIV block to place content. CSS allows web designers to treat DIV blocks as A box, by controlling the padding of the inner distance , the margin of the outer distance, and the border property of the border of the control element to adjust the display result of the box. We will present a variety of different CSS box model effects in the example, which is good for web page layout There is considerable help.

Here we must first explain the attributes that the CSS box model will use

• padding : Used to design the distance between the content of the element and the border of the element itself. For details, please refer to: CSS padding padding properties and usage examples .
• margin : Used to design the distance between elements and external elements. For details, please refer to: CSS margin properties and usage examples .
• border : Used to design the color, thickness and style of the element border. For details, please refer to: CSS border .
  

CSS box model Schematic diagram of the box model

CSS box model practical example

<style type="text/css">
#BoxText1 {
border:5px orange solid;
padding:10px;
width:500px;
margin:15px 0px;
}
#BoxText2 {
border:2px gray dashed;
padding:6px;
width:500px;
background-color:#fafafa;
}
</style>
<div id="BoxText1">This is the test block of the CSS box model<br>The orange border is 5px thick, with a solid line, the inner margin is 10px, and the outer margin is 15px. </div>
<div id="BoxText2">This is the test block of the CSS box model<br>The gray border is 2px thick, the dashed line, the inner margin is 6px, and the background color is light gray. </div>

Example presentation results

This is the test block of the CSS box model. The
orange border is 5px thick, with a solid line, the inner margin is 10px, and the outer margin is 15px.

This is the test block of the CSS box model. The
gray border is 2px thick, the dashed line, the inner margin is 6px, and the background color is light gray.

In the example we are prepared two different DIV blocks, respectively, through the CSS of the border , padding , width, margin , background-Color design a box model effect and other property, the first block is orange 5px thick border, The padding between the border and the content is 10px, and the vertical distance between the border and the second block is increased through the outer margin property, so that it will not stick together. The border of the second DIV block It looks relatively thin, with a width of only 2px, but because of the dashed effect, the visual performance is also pretty good. The inner distance is adjusted to 6px, so the distance between the text and the border has become closer, plus the light gray The overall effect of the background color is completely different. This is the design and application example of the CSS box model. Please change and practice by yourself.