CODEWITHSUNDEEP
htmlcss
Chris Thompson
Chris Thompson

Reputation: 35598

Remove padding beneath heading tag

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?

Upvotes: 25

Views: 85939

Answers (6)

Muhammad waleed
Muhammad waleed

Reputation: 21

Set height according to your requirement along with font size and it will remove the padding if the height is lesser than the font size takes!

Upvotes: 0

Ronie
Ronie

Reputation: 21

In Addition to @Jonathan answer, You must add:

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

That solved my problem.

Upvotes: 1

user843337
user843337

Reputation:

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

h3 
{ 
    display:inline; 
}

Upvotes: 14

Jonathan
Jonathan

Reputation: 1892

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.

Upvotes: 55

Jeff Wilcox
Jeff Wilcox

Reputation: 6385

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.

Upvotes: 2

James Skidmore
James Skidmore

Reputation: 50338

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;
}

Upvotes: 0

Related Questions