Remove padding beneath heading tag

Question

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

He         


        

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.

Answer 4

In Addition to @Jonathan answer, You must add:

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

That solved my problem.

Answer 5

Another option that removes the space below the text is as follows:

h3 
{ 
    display:inline; 
}