Css+html Simple Layout Demo

The introduction of CSS in HTML style, you can change the HTML block layout, so that the layout of the interface more beautiful. Next look at a small example of a basic layout:

The effect is as follows:




In the above layout, we mainly use the margin property to lay out the div, in practice, the sense margin property is mainly applicable to the layout between blocks and blocks, when we want to layout the contents of the box, we can use another property of the box: padding, This property can be used to lay the distance inside the box:

For example, we add the padding attribute and add some text content to the four div:



：




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

After feeling the CSS style, the recent little demo is not only more flexible than the previous demo, but also more simple to set up the styling.







Css+html Simple Layout Demo