Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to set the distance between css and div". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Method: 1, add "margin-top: spacing value;" or "margin-bottom: spacing value;" style to set the upper and lower distance between div; 2, add "margin: upper margin, right margin, lower margin, left margin to div element;" style sets the distance between div.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The method of how css sets the distance between div

1. Create a new html file, named test.html, to explain how to use css to set the spacing between div and div. Create two div and set their class property to div1,div2, which is mainly used to define the style of the class name below. Use css to set the width and height of both div to 200px, and set the different background colors of the two div.

The output is as follows:

2. Use margin-top to set the spacing between the top of the div and other div, for example, use css to set the distance between the top of the second div and the first div to 10px.

Output result:

You can also use margin-bottom to set the spacing between the bottom of the div and the next div, for example, using css to set the spacing between the bottom of the first div and the top of the second div to 10px.

The output is the same as the example above.

3. Use the margin shorthand property to set all outer margin properties in a declaration. This property can have 1 to 4 values.

This shorthand property sets the width of all the outer margins of an element, or sets the width of the outer margins on each side.

The vertical adjacent outer margins of block-level elements are merged, while inline elements do not actually occupy the upper and lower outer margins. The left and right margins of inline elements are not merged. Similarly, the outer margins of floating elements are not merged. A negative margin value is allowed, but be careful when using it.

Examples are as follows:

Document div {width:200px; height:200px;} .div1 {background:red; margin:0 0 20px 0;} .div2 {background:yellow;} first div second div

Output result:

This is the end of the content of "how to set the distance between css div". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.