Intermediate CSS - Confusing part: Box, Border

What makes me kind of confusing.

1.Box model

padding, width, height, margin, border

 

Example is "<a> tag".

<a> tag is inside of the bottom-container.

 

<fig a> original with only color attribute applied

<fig b> fig a + padding 40px

all side 40px padding

padding seems to expand it self.

So clickable area is changed to the range of padding.

<fig c> fig a + margin 40px

Like padding, the text distance becomes same.

But the clickable areas not changed.

Padding VS. Margin

Padding increases itself.

Margin increases the distance from outer space.

---

Center Aligning

<fig a> original

<fig a-1> original width 40%

this make the paragraph element's box size to 40% of body

<fig b> width 40% + box align to center(margin: 40px auto 60px;)

Increased gap between upper box.

---

Margin values

If four values: margin: top, right, bottom, left (clock-wise)

If three values: margin: top, right and left, bottom

If two values: margin: top and bottom, right and left

If one value: margin: all side

---

2. Border

Handling <hr> with border to make a horizontal line.

 

Understanding Border properties.

 

 

If you simply want to style border with only border property with 3 values,

the order of styling as follows, /* width | style | color */

ex.

border: medium dashed green;

BUT, if you customized the border, you need to separate each side starting with border-style: none.

hr {
    border-style: none;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: #66bfbfa2;
    border-width: 5px;
    margin: auto;
    width: 5%;
}

result of above code

To applying different styles to each border, first make sure that border-style to none.

Then <hr> has no border style to all sides.

Then apply the side you want to style.

Above border has two styled border, top and bottom.

If I eliminated one of them,

 

This line becomes thinner.

 

Now decide thickness of border:

    -> "border-width". also differently applied to each sides.

Length of border is width of <hr>:

    -> "width"

Align to center:

    -> "margin"

Increase height of line:

    -> increase border-width

        (border-width: 50px;)