How to remove whitespace caused by hiding Title

Question

I have a SharePoint site which I have used the following CSS in a Script Editor Web Part to hide the Top Navigation and page Title as I do not want these elements to appear on the page. However, now I have a whitespace remaining where the Title and Top Navigation were. I want to know how to remove this whitespace so the content on the page is inline horizontally with the grey navigation links on the left side of the page. I'm including both the CSS and a screen shot to be clear.

<style>
 #DeltaTopNavigation {
    display: none;
 }
 #pageTitle {
    display: none;
 }
 #Td1 {
    position: relative;
    top: -90px;
 }
 #Td2 {
   position: relative;
   top: -200px;
 }
</style>

Answer 1

If one of the elements mentioned in your question is a block-element, you can change its height: 0px. If you don't get it to work, or it isn't enough, you have to add a negative margin-top to the content element.

Answer 2

SharePoint 2013 puts padding around a bunch of stuff, I found if I do the following CSS it eliminates most of the troublesome space.

h1#pageTitle.ms-core-pageTitle {
    display:none;
    height:0px;
}
div#contentRow{
    padding-top:0px;
}
div#s4-titlerow.ms-dialogHidden {
    padding-bottom:0px;
}
div.welcome.blank-wp {
    padding-top:0px;
}