CSS Box Model

WBOY
Release: 2016-09-14 09:24:07
Original
1654 people have browsed it

 The so-called box model treats the html element as a box. In daily life, boxes are the most common items. For example, a box of mooncakes has an outer packaging box, an ordinary iron box inside, and plastic or paper packaging inside. There are several small packages in a large box. In the same way, each tag in HTML is regarded as a shaped box, and the relationship between tags can be regarded as the relationship between boxes.

The box model consists of: content: what the element wants to present

    Padding: the distance between content and border

      Border

     Margin: the distance between boxes

 The width and height attributes are the width and height attributes of the content (content), not the width and height of the element.

The width of the element = left margin + left border + left padding + width + right padding + right border + right margin

The height of the element = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin

 It can be inferred from the above formula that the properties of each edge can be set separately (in clockwise direction).

 For example: padding:10px; (equivalent to setting padding:10px 10px 10px 10px;)

 padding:10px 20px; (equivalent to: padding:10px 20px 10px 20px;)

 padding:10px 15px 20px; (equivalent to: padding:10px 15px 20px 15px;)

The same applies to other margins and borders.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template