Learn Basic CSS by Building a Cafe Menu - Step 70

HTML-CSS
1

Step 70

In this step i am not abble to understand why the sum of all edges plus the height is equal to 5px as suggested in the text from the exercise:

By changing the border to the same color as the background, the total height of the line is 5px (3px plus the top and bottom border width of 1px).

Change the height property of the hr to be 2px, so the total height of it becomes 4px.

2

Please post the link to the step.

3

Welcome to our community!
It is important to follow the instruction, in this case, the definition mentioned in it:
“The default value of a property named border-width is 1px for all edges of hr elements.” So if you don’t use a ‘border-width’ property for the ‘hr’ element explicitly you have by default border of 1px border (try to add the ‘border-width’ property and set its value to zero, and set the height value to zero too - you actually don’t have ‘hr’ element visible). Total height is the sum of the top border width, the bottom border width and the height of the line. Take a look at this example:
image
This will produce:
image
There is no visible line.

image
Now, without a ‘border-width’ property, and height set to zero your line is visible.
image

So, by default ‘hr’ element has a preset border width of 1px all around.

4
5

Many thanks for the explanation…so, when the exercise mentioned " border-width is 1px for all edges of hr elements", it was refering to border-top-width = 1px and border-bottom-width = 1 ?

6

This is just an example. Try to change values and see what is going on:

hr {
  width: 400px;
  height: 20px;
  border-width: 1px 5px 10px 15px;
  border-color: red;
}

The code above will produce the following:
image

The answer to your question: if ‘border-width’ property is set to 1px , it means that ‘hr’ element has all four borders set to 1px:
image

7

Fortunatelly, i think i got the point! The exercise mencioned " By changing the border to the same color as the background, the total height of the line is 5px (3px plus the top and bottom border width of 1px ).", meaning, if i want to measure the total height of the hr element i have to start from top and ending in the bottom of it.

DobarBREND, many thanks for the patience and all the lovely replies to make things clear!

1 Like