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

This article mainly introduces the DIV spacing setting skills of what the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this DIV spacing setting skills, let's take a look at it.

First, eliminate the distance between the upper and lower structures

Distance between DIV

Let the distance between the two upper and lower structure DIV blocks be zero. Usually when making DIV CSS pages, beginners will not consider initializing CSS attributes, so the default CSS attributes of each tag attribute will cause dislocation, compatibility and other problems.

For example, there is a certain spacing between the two box DIV blocks of the upper and lower structure, which cannot be eliminated.

2. Clear the solution of DIV spacing

Set each attribute parameter of the DIV tag to 0 in CSS

Div {margin:0;border:0;padding:0;}

Setting the DIV tag CSS attribute here is equivalent to initializing the DIV tag CSS attribute, where the margin outer margin is set to 0; the border border attribute is 0 and the inner padding is also 0; this is equivalent to initializing the distance between the DIV boxes to 0, so that the DIV does not have a certain distance directly.

Third, set the spacing between DIV boxes

The above is to use CSS to clear the distance between boxes. Next, I'd like to introduce you to setting the spacing between boxes.

Use the CSS style word for margin (you can go to the CSS margin tutorial to learn more about how to use it).

1. Set the distance between the top and bottom of the object

.-a {margin:10px 0}

Set the top and bottom spacing of "- a" object to 10px, left and right to 0

2. Set the distance between the left and right of the object

.-b {margin:0 8px}

Set the space between the top and bottom of the "- b" object to 0, left and right to 8px

3. Set the distance between the DIV box and the top

.-c {margin-top:10px}

Set the adjacent distance between the "- c" object and the top to 10px

4. Set the adjacent distance between the DIV box and the bottom.

.-d {margin-bottom:10px}

Set the distance between the "- d" object and its lower neighbor to 10px

5. Set the distance between the DIV box and the left side

.-e {margin-left:9px}

Set the adjacent distance between the "- e" object and the left side to 9px

6. Set the adjacent distance between the box and the right

.-f {margin-right:12px}

Set the adjacent distance between the "- f" object and the right side to 12px

Above, in order to facilitate the introduction of margin to set the outer spacing of objects, the objects are named ".-a" to ".-f" respectively, and more naming is needed in actual use.

Fourth, there should be a certain distance between the left and right structural contents.

Solutions and techniques:

Generally, we use the float floating properties (float:left (left), float:right (right)) to solve this problem. Such a layout is generally a certain total width, as long as the left and right content DIV width setting less than the total width can be achieved, note that the width calculation must include their own set width + border width + padding width + margin width composition.

Tip: in the production of DIV CSS, it is often necessary to calculate a layout like this.

To achieve the above effect, the total width is 200px, while the left and right layouts have borders and a certain distance between them, so the distance setting is relatively large for the style here.

CSS Code:

.div-c {width:200px;}. Div-a {float:left; width:50px; border:1px solid # 999; height:60px;} .div-b {float:right; width:120px; border:1px solid # 999; height:60px;}

Html Code:

Complete DIV+CSS code:

DIVCSS5 case. Div-c {width:200px;}. Div-a {float:left; width:50px; border:1px solid # 999; height:60px;}. Div-b {float:right; width:120px; border:1px solid # 999; height:60px;}

Description:

1. Set the total width of 200px (div-c), and use float:left left floating (local left) and float:right right floating (local right) for left and right DIV, and set the border and width respectively.

2. Set the total width of left and right DIV blocks (that is, div-an and div-b) + border less than the total width (that is, the width of div-c objects).

This is the end of the article on "what are the skills for setting DIV spacing?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the skills of DIV spacing setting". If you want to learn more, you are welcome to follow the industry information channel.

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.