Css+html Simple Layout Demo

Source: Internet
Author: User



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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.