# [SOLVED] In wordpress How go remove space above content/page title



## RAPts (Oct 25, 2008)

Have website using theme twentyeleven and a child theme (with custom style.css).

Am trying to reduce (eliminate) space between the Menu and where the Page title would be (have eliminated title).



Have tried adding:

#main
.singular.page .hentry {padding:0em;} and



.singular.page .hentry {padding:0em;} by itselfk - and

#site-title {
padding: 0;
} and

#site-description {
padding: 0;
}

but nothing works.



Using fireBug (via Inspect Element) saw

.singular.page .hentry {
padding: 3.5em 0px 0px;
}

changed 3.5 to 0 and some of the space disappeared, but when I added the coresponding stmt to my custom css and reloaded, nothing happened.



What am I doing wrong?


----------



## wmorri (May 29, 2008)

*Re: In wordpress How go remove space above content/page title*

Hi, I would test things out with inspect element, and see what happens for you. Since you are using a child theme with custom css it is hard for us to know more about the theme. I can try and look up the spacing for twenty eleven, and see if it is using the same spacing as your theme. Other than that the only thing I can think of is if you want to let us look at the custom theme.


----------



## RAPts (Oct 25, 2008)

*Re: In wordpress How go remove space above content/page title*

Don't really know what to say:

as I stated, modifying .singular.page .hentry {
padding: 3.5em 0px 0px;
}
to ... padding: 0em deleted some of the space, but adding it to my custom style.css didn't delete the space.

Just looked again, using Inspect Element and there are two spaces ...
from a <div id="content" role="main"> ...a small space
and an 
<article id="post-112" class="post-112 page type-page status-publish hentry"> ... a larger space

both spaces below the 'menu area'

site is www.firechaplain101.org


----------



## DDAoN (Mar 19, 2011)

*Re: In wordpress How go remove space above content/page title*

RAPts, try using this:

```
#main {
  padding-top: 0;
}

.singular.page .hentry {
  padding: 0;
}
```
If that doesn't do what you want, try changing the second rule to:

```
.singular.page .hentry {
  padding: 0 !important;
}
```
Then call me in the morning.


----------



## RAPts (Oct 25, 2008)

*Re: In wordpress How go remove space above content/page title*

Thank you DDAoN

The 2nd 'try' worked (using the !IMPORTANT).

I had tried both suggestions before with no joy

Didn't expect to work this time ... the only difference was that I had specified 0em (instead of only the 0 in your sugg - go figure!) ... still didn't work until !IMPORTANT was added (had also tried that previously but again with 0em)

I ran quickly thru the other menu items and most everything looks OK (in the Testimonials the letter sizes were reduced but I've been messing with that and it's probably something I changed - so not concerned).

THANKS for the help.


----------



## DDAoN (Mar 19, 2011)

*Re: In wordpress How go remove space above content/page title*

The fact that you had to apply "!important" means that where you are placing that CSS is either not the last point apply styling to that element OR is not the most specific in its pathing definition. Basically, the more accurate your pathing (or something like that), the higher priority it has over other styling, but this rarely comes into play.

More than likely it's just that the CSS file you're editing isn't the last one applying styles to it. "!important" just says "I don't care what comes after me, if it isn't important, too, I say what goes!" This is probably why the padding edit for #main I offered didn't work (actually, I know that's why [Developer Tools is an amazing tool]).

Anyways, I'm glad you were able to get it working the way you wanted. Please mark the thread as solved for other users to know that there is a solution. ^^

*WARNING: Beyond this point is just informational! DO NOT READ IF YOU DON'T CARE ABOUT LEARNING THE MECHANICS OF CSS!!!*

As for the "0" vs "0em", the proper way to specify a 0-value in CSS is, well, 0. Regardless of the unit of measurement, 0 is 0, period. When you're applying a 0-value for the entire thing (like padding), you don't need to repeat it. You'll see repetition of this only when the corresponding values don't match. For example:

```
padding-top
             --------------
padding-left|              |padding-right
             --------------
             padding-bottom
```
Think of it like:

```
a
  -
d| |b
  -
  c
```
The "proper" way to set these values is:

```
padding-top: a;
padding-right: b;
padding-bottom: c;
padding-left: d;
```
This can, and is commonly, shorthanded to:

```
padding: a b c d;
```
So, if you have

```
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
```
you can shorthand it to

```
padding: 1px 2px 3px 4px;
```
Now, the messy part is when there arn't 4 values defined. So, try to think of it as "the shorter it is, the more it mirrors across". It'll be easier to show than explain:

```
a
  -
b| |b
  -
  c
```
Three values means that the fourth value is identical to its mirror. Since the fourth value is "left", it's mirror value is "right", or b. So, if you have

```
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 2px;
```
you can shorthand it to

```
padding: 1px 2px 3px;
```
This is because the value of "padding-right" and "padding-left" are identical. The key is to remember that the values are clockwise, starting at 12.

So, two values:

```
padding-top: 1px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
```
you can shorthand it to

```
padding: 1px 2px;
```
And one value:

```
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
```
you can shorthand it to

```
padding: 1px;
```
Another thing to consider is that you must define EVERY value before your last unique value. So if you have "top", "right", and "bottom" identical while "left" is unique, you must define all the values:

```
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 2px;
```
you can shorthand it to

```
padding: 1px 1px 1px 2px;
```
I hope this helps. ^^


----------



## RAPts (Oct 25, 2008)

*Re: In wordpress How go remove space above content/page title*

Thanks again



> Please mark the thread as solved for other users to know that there is a solution.


My first thread here ... how do I mark resolved?


----------



## DDAoN (Mar 19, 2011)

*Re: In wordpress How go remove space above content/page title*

At the top of the thread, you should have a dropdown menu for "Thread Tools". It should be one of the first options on that menu. ^^


----------



## mrremy (Aug 29, 2006)

*Re: In wordpress How go remove space above content/page title*

A little late to the party, but just wanted to tell you to not forget about the css property of "margin" in addition to "padding" - they both have a play in spacing.

to give you an idea, it's like this from outside to inside :

margin --> padding --> content

this is true for all sides: left, right, top, and bottom.

More info about margins : CSS Margin

and padding : CSS Padding


----------



## RAPts (Oct 25, 2008)

*Re: In wordpress How go remove space above content/page title*

Thank you, both

Found the "tools" ... unfortunately the only 2 options are:

show printable version and
download

Sorry to be so much trouble


----------

