How can I change the top and bottom padding of horizontal rule?

I imagine it would be:

hr { margin-top: 10px; margin-bottom: 10px }

or the shortened version is:

hr { margin: 10px 0 10px 0; }

Thanks, Kale. That seems to make sense, but for some reason that code is changing the weight of the horizontal rule and not dealing with the padding alone. As soon as I plug it in, the rules get bumped up to 10px in weight. Not exactly sure why a padding command would effect the weight…?

I just tested and yes, you are correct, it expands the HR, so use margin instead -- it would be:

hr { margin-top: 10px; margin-bottom: 10px }

or

hr { margin: 10px 0 10px 0; }

Perfect! That did it. Thanks for the help.

This is how you can set the padding for top and bottom in a single declaration.

   hr { margin:  50px 100px; }

50px for both top and bottom and 100px for both left and right.

Here are some references for that as well.

css padding property

css margin property

Hi @Brice Beasley, I made a video tutorial for you on how to Change the Top and Bottom Padding. Hope this helps! https://www.askquesty.com/squarespace-answers/change-the-top-and-bottom-padding-squarespace-tutorial