Css+html Simple Layout Demo

Introduce CSS style in HTML. Can change the HTML block layout, the office more beautiful. Next look at a sample base layout:

Effects such as the following:




In the layout above. We mainly use the margin property to lay out the div. In practice. The feel margin property is primarily applicable to the layout of blocks and blocks, and when we are going to lay out the contents of the box, we can use the box with a property: padding, which can lay the distance inside the box:

Like what. We add the padding attribute and add some text content to the four div:



：




Note that when actually doing this, the padding value is added, resulting in the div not being displayed side-by-side in the parent Div. This also changes the width value of the div so that the fourth Div is not pushed down.

Feel added after CSS style. The recent small demo is not only more flexible on the layout, but also easier to set up than the demo that used to be done with just HTML.








 
Copyright notice: This article Bo Master original articles, blogs, without consent may not be reproduced.
 
Css+html Simple Layout Demo