Use padding to implement highly controllable separation lines and control padding

Use padding to implement highly controllable separation lines and control padding

I. method for implementing the separation line (I don't understand: isn't the vertical direction setting of the span element affected by padding ?)

Html:

1 <div> 2 log on to <span> </span> Register 3 </div>

Css:

1. span {2 padding: 12px 6px 1px;/* You can adjust the upper and lower heights of the air line by changing the first and third parameters, padding-top and padding-bottom */3 margin-left: 12px; 4 border-left: 2px solid #000; 5 font-size: 0; 6}

Implementation principle: Open the chrome browser developer tool to view the box model.

Figure 1: Set the margin-left of the span label to 12px, corresponding to effect 1.

 

 

Figure 2: In order to make the left and right sides of the separation line symmetric, here we set the padding-left and padding-right of span to 6px. Because there is no content in span, the total value is 12px, same as margin-left.

 

Figure 3: Define the left border of the span element as the split line.

 

Figure 4: At this point, adjust padding-top and padding-bottom to increase or decrease the overall height of the box to adjust the separation line.