How to solve the overlapping problem of web pages with css

CSS method to solve overlapping web pages: 1. Set a border for the parent element; 2. Add padding to the parent element; 3. Add a sibling element with width and height above the child element; 4. Set the border for the parent element "overflow: hidden;" attribute, etc.

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version. This method is suitable for all brands of computers.

Recommended: "css video tutorial"

css solves the problem of web page margin overlap

The following will introduce how to use css to prevent overlapping Several ways to overlap margins.

Assume a set of dom structures first

<div class="parent">
    <div class="child">
    </div>
</div>

Normally, if margin is set for a child element, this attribute will have the same effect on the parent element, however

This is actually not the result we want. We just want to set margin on the child elements, so what should we do now?

1. Set a border to the parent element

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

2. Add padding to the parent element

.parent {
    padding： 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

3. Add a sibling element with width and height above the child element, remember There is width and height to live in.

<div class="parent">
     <div style="width: 20px;height: 20px;margin-top: "></div>
     <div class="child">
     </div>
</div>

4. Set the overflow: hidden; attribute to the parent element

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

5. Set display: inline-block to the child element; (if the child element is an inline element or an inline block-level element, There will be no problem of overlapping margins)

.parent {
    width: 300px;
    height: 300px;
} 
.child {
    width: 200px;
    height: 200px;
    margin: 20px; 
    display: inline-block;
}

6. There are many ways to achieve this by removing sub-elements from the document flow, such as floating, absolute positioning, etc. I will not give a detailed explanation here.

The above is the detailed content of How to solve the overlapping problem of web pages with css. For more information, please follow other related articles on the PHP Chinese website!