Box Model Code Shorthand

Source: Internet
Author: User

Remember that margins (margin), padding (padding), and border (border) settings are set in a clockwise direction, up or down in four directions, in the box model: upper right bottom left. Examples of specific applications in margin and padding are as follows:

margin:10px 15px 12px 14px;/* set to 10px, right set to 15px, lower set to 12px, left set to 14px*/

There are three abbreviations that are commonly used:

1. If the values of top, right, bottom, and left are the same, such as the following code:

margin:10px 10px 10px 10px;

can be abbreviated as:

margin:10px;

2. If the top and bottom values are the same, left and right values are the same, as in the following code:

margin:10px 20px 10px 20px;

can be abbreviated as:

margin:10px 20px;

3. If the values of left and right are the same, such as the following code:

margin:10px 20px 30px 20px;

can be abbreviated as:

margin:10px 20px 30px;

Note: The abbreviated method of padding and border is consistent with margin.

Box Model Code Shorthand

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.