Remove padding beneath heading tag

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

h3 
{ 
    display:inline; 
} 

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.


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.

Tags:

Html

Css