The difference between padding and line-height

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags basic basic knowledge clear difference it is not clear question set

A friend raised a question, the difference between padding and line-height. This is the basic knowledge of CSS, the box model knowledge and layout and related attributes are not very familiar with the time, it is very easy to confuse and not clear.

In fact, padding is a layout setting that defines the inner margin of a container. The line-height is the line spacing setting, which sets the row height of the object, such as text.

The padding is also called the inner margin, also known as the padding

Retrieves or sets the patch margin for the four edges of the object.
If all four parameter values are supplied, the upper-right-left order is applied to the four edges.
If only one is provided, it will be used for all four edges.
If two is provided, the first is used for the top-down and the second for left-right.
If three is provided, the first is used on, the second is used for left-right and the third for down.
For inline objects to use this property, you must first set the height or width property of the object, or set the Position property to differs.
Negative values are not allowed.

Line-height is the row height

Retrieves or sets the row height of the object. The distance between the bottom of the font and the top of the font.
If a row contains more than one object, the maximum row height is applied. The row height cannot be negative at this time.
That is, the line spacing of the text. Text is usually made up of one or more lines, representing the distance between lines.

For example:

<p> Web Teaching Network--China web design, web production first stop </p>
Or
<div> Web Teaching Network--China web design, web production first stop </div>
P,div {
padding-top:40px;
line-height:200%;
}

Related Article

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.