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

I have tried this bit of code:

hr { margin: 3px; }

and it worked, to an extent. The problem being it's adding a margin around all sides of the horizontal rule. As the margin px value increased, the shorter the horizontal rule got. I would like to be able to only effect the top and bottom padding of the horizontal rule. Can someone point me in the right direction to adjust this value? Much appreciated.

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