Home > Developer > Web Develop
How is a div being propped up? Width (self) + padding (inner margin) + margin (margin)
The first is the width of itself, we can set the width, then the elements in the div if not set the style will be from the upper left corner of the div to arrange.
Let's go through an example:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Example</title><style>Body{margin:0; }. Main{background:#ddd;width:300px; }</style></Head><Body> <Divclass= "Main">C + + support for Visual Studio Code was provided by a Microsoft C + + extension to enable Cross-platform C and C + + development Using VS Code on Windows, Linux, and MacOS. The extension is still in preview and our focus are code editing, navigation, and debugging support for C and C + + code ever Ywhere that VS Code runs. </Div></Body></HTML>
Then we only gave the width, look at
We will find that if we only have the width of our own, the text will appear very crowded, so if we open the text from the inside? We can add a bit of padding to this div.
. Main { background:#ddd; width:300px; padding:20px 50px; }We add up and down 20px, about 50px padding, then the effect is as follows:
So much more comfortable, we can also see that the effect of the inner margin is displayed inside the Div , the inner margin of the place will also have a background color.
So how do we separate the two close-up div so that they have a certain interval, which requires an outer margin?
Based on the above, we add a line of code
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Example</title><style>Body{margin:0; }. Main{Display:Inline-block; /*div block element, which is set here as a inline block element*/background:#ddd;width:300px;padding:20px 50px;margin:20px 10px; }</style></Head><Body> <Divclass= "Main">C + + support for Visual Studio Code was provided by a Microsoft C + + extension to enable Cross-platform C and C + + development Using VS Code on Windows, Linux, and MacOS. The extension is still in preview and our focus are code editing, navigation, and debugging support for C and C + + code ever Ywhere that VS Code runs. </Div> <Divclass= "Main">C + + support for Visual Studio Code was provided by a Microsoft C + + extension to enable Cross-platform C and C + + development using VS Code on Windows, Linux, and MacOS. The extension is still in preview and our focus are code editing, navigation, and debugging support for C and C + + code ever Ywhere that VS Code runs. </Div></Body></HTML>
Then we look at the effect, two of the same div is stretched out, we can also see that the margin is independent of the elements outside, no background color.
Summarize the effects of the internal and external margins:
Inner margin--inward-occupied width
Margin--Outward occupied width
Supplement: The Writing method of Margin,padding
padding:20px;margin:20px;
Up and down around 20px
padding:20px 10px;margin:20px 10px;
Up and down to 20px, about 10px
padding:20px 10px 30px;margin:20px 10px 30px;
20px, around 10px, 30px
padding:20px 10px 30px 40px;margin:20px 10px 30px 40px;
On 20px, right 10px, next 30px, left 40px
Ending ~ ~
CSS Getting Started Guide--How to prop up a div? Width/margin/padding with the talk
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
