Border on Headings

[erinep23]

I have applied a border to my Heading 3 style. I would like the text to have some space between the border and the text. I have attached a screenshot. What element do I need to adjust on the CSS? I tried a couple of things but I have yet to fix it.

[Msquared]

I achieve this with the padding attribute.

There is a very helpful diagram somewhere in the help showing exactly what borders, margins and padding mean, but I can't find it just at the moment. Perhaps someone has the link. Mike Hamilton also did a webcast about a year ago, where he included that diagram, and talked around how to get the spacing you want, and some of the pitfalls (IE, Chrome and Firefox can treat padding and margins differently if the settings conflict).

However, I'm not sure whether you want to have the space between the text and the border at the top or on the left hand side, or both. And if you want space at the left hand side, do you want the border to move out, or the text to move in?

[LTinker68]

I don't know where the diagram is in the Flare help, but there's a description of the "box model" at http://www.w3schools.com/css/css_boxmodel.asp.

[erinep23]

Thanks for your help. Ideally, I wanted space between the left border and the heading text.

[Msquared]

So do you want to leave the text where it is, and move the border to the left, or leave the border where it is, and move the text further right?

If the former, I think you just need to set the left padding to give the spacing of your choice. If the latter, then you will first need to set the left margin to move the text to the position you want it to be, then set the left padding to move the border back (otherwise the border will still be with the text at its new indentation).

[Msquared]

Here is the link to Mike Hamilton's webinar about CSS stylesheets, in which he explains how padding, margins etc work https://www.madcapsoftware.com/demos/si ... 0355050068

[LTinker68]

If you want the border moved to the left of the text in the topic, then set the margin-left attribute on the h1 tag to a negative value (e.g., -25px), then set the padding-left attribute to a positive number (e.g., 25px) to get the heading text to line up with the rest of the topic.

[erinep23]

Thanks for all your help!