7

There's a very annoying chunk of space between webparts such as promoted link and a content editor, and I'd like to remove it. I tried some css found on the web, but that didn't solve it. Does anyone know how to remove this annoying space?

Thanks in advance.

Tried already in a Content Editor Web Part:

<style type="text/css">
.ms-PartSpacingVertical
{
margin-
}
.ms-PartSpacingHorizontal
{
width: 0px;
}
#_invisibleIfEmpty {
padding: 0px;
}
</style>

or

<style type="text/css">
.ms-webpartPage-root {
     border-spacing: 0px !important;
}
.ms-webpartzone-cell {
margin: 0px !important;
 }
</style>

The second works, but only for the webpart where the code is inserted, in this case the Content Editor. For example, there are apps like Promoted Links where doesn't have anywhere, where you can insert code.

Thank you.

Picture of class:

enter image description here

Sergiu Tripon
  • 161
  • 2
  • 4
  • 11

3 Answers3

7

This is something that's caused me a lot of grief until tonight when I devoted a solid half-hour to solving it. Hooray for Sharepoint's figuratively infinitely nested elements.

If you (or others reading this) are having the same trouble as me, the culprit is border-spacing, not margin, padding or border. The following collapses web-part borders, getting rid of the invisible margin around them which is also invisible in browser code inspectors.

.ms-webpartzone-cell,
.ms-webpart-zone {
    border-collapse: collapse;
}

You may also wanna take a look at the padding of .ms-rteTable-x (where x is "default" or a 0-based index).

Benjineer
  • 171
  • 1
  • 2
1

In addition to benjineer's answer (made a minor difference in my case), this took care of the height of each webpart making a considerable difference.

.ms-wpContentDivSpace {
    height: auto !important;
}
Robert Lindgren
  • 24,520
  • 12
  • 53
  • 79
planetregin
  • 111
  • 2
1

Where are the web parts applied? If they are in a site Page, either Web Part Page or Wiki Page, just edit the HTML and remove any spurious hard coded spaces and line breaks between the web parts. Very often, SharePoint rich text in Wiki Pages will create havoc with spacing around elements. Unfortunately, very often, SharePoint Wiki Pages will not tolerate HTML edits of the page.

Can you narrow down where exactly your issue is?

Edit after comment:

If it's a public facing web site, chances are that it is a Publishing site with Page Layouts that determine the placement of web parts on the page. You will need to edit/manipulate the page layouts to change how they appear on the rendered page.

Hint: Use the Developer Tools in IE and click through the page elements to see where and what causes the unwanted space. It's either a setting for margin or padding, or it can be a manually inserted block of empty paragraphs. F12 in IE should help you identify the culprit.

Then you need to work out if the culprit is in the page layout or in the CSS.

teylyn
  • 8,922
  • 2
  • 18
  • 36
  • It's a public facing website, and working with the default.aspx of a subsite, so I'm guessing it's a webpart page. I'm quite new to Sharepoint. – Sergiu Tripon Feb 04 '14 at 11:19
  • see my edits after comment. – teylyn Feb 04 '14 at 11:24
  • As I specified the second piece of CSS worked on a Content Web Editor because this web part has the facility of editing the source. But, for other web parts, it's impossible to add css to them. – Sergiu Tripon Feb 04 '14 at 12:37
  • It is not impossible to change CSS of web parts. You need to be able to identify the web part (by ID or by class). Then you can change any aspect of the web part's CSS with JavaScript (or a whole lot easier with jQuery). – teylyn Feb 04 '14 at 12:49
  • Edited question. That seems to be the class. – Sergiu Tripon Feb 04 '14 at 13:39
  • So, check which CSS settings are causing the gap and change them. – teylyn Feb 04 '14 at 21:02