Remove padding beneath H3 tag

Question

This is, no doubt, an easy question but I can't seem to type it correctly into Google to find the answer...

currently I have a list that has an H3 heading above it (which I can't really remove easily, it's auto generated by a cms) and looks something like this

Headline
|
|
List stuff

and I want to get rid of the pipes. They seem to be "built in" to the <h3> tag, anyone have any idea what css property of h3 would get rid of this?

Thanks!

Answer 1

If the pipes are actual text, you're not going to be able to get rid of them without using some form of JavaScript.

If the pipes are a background image for the H3, you can use this to get rid of them:

h3
{
  background-image: none;
}

Answer 2

Try setting the "border" style property on the H3 to

border:0;

It's possible that the "pipe" is actually a border on the headline, a border-right property, that you can modify or override.

Alternative: A true pipe that the CMS generates (I'm assuming you've checked the HTML source and this is not the case, but good to ask)

Can you select the text and see if it is a true pipe character, or rather just a visual element?

Other Alternative: Some kind of CSS content property. More rare, since most browsers don't support it.

Answer 3

H1, H2, and H3 tags all inherently have a margin and padding added to them by browsers.

You can test this by putting a background on the H1, H2, and H3 tags in css and looking in different browsers.

To remove the "pipe spacing" you should:

h3{
    padding: 0px;
    margin: 0px;
}

Then you can re-add whatever you would like since CSS is a one-way execution path. Consequent CSS values will overwrite base-level CSS.