How CSS resolves child elements out of bounds

Source: Internet
Author: User

1. Add: How the box model is calculated in CSS

. box {



Content-box: The total width =margin+border+padding+width of a box, that is, width simply refers to the contents of the box.

Border-box: The total width =margin+width of a box, that is, the width of the content, padding, border, and

2. Supplement: How to solve the problem of margin-top/bottom of sub-elements

As the following illustration: The first child element in the parent container Parent2 child2, it is not feasible to set the Margin-top property to move the 20px down in the parent container.

Instead, the parent element div moves down 20px along with Child2. How to solve this kind of problem.

<!doctype html>


(1) Adding border--to the parent element has side effects: The general parent Element Div is used for layout use, adding border will use the content of the height and width to become larger

(2) Adding padding-top:1px--to the parent element has side effects

(3) Adding overflow:hidden--to the parent element has side effects: Once the child element content overflows, it will be unable to display the overflow content

(4) Add content generation for parent element: This method has no side effects

. parent:before {

Content: ";



<!doctype html>

3. Supplement: child element all floating stepfather element height is 0


(1) Adding overflow:hidden--to the parent element has side effects

(2) Add a post-content build for the parent element

. parent:after {

Content: ";




<!doctype html>

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: 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.