Tab links adding margin on export

I’ve made some tabs with percentage width so they will fill horizontally but on export a margin is added on the right. I haven’t actually found what it is that makes the margin. Its not shown on published site.
Public link to test site
Published with webflow
Exported site

So, a little help on how to adress this. I want it to bee like in the published site not as it is in the exported.

Thanks alot =)

I’ve noticed this a lot with other elements next to each other with percentages. There are two ways to fix this, because basically the line breaks in the HTML source causes the browser to add a space in between, whereas the webflow source has no line breaks in it so it isn’t a problem. On Chrome, right click and View Source on the exported and the published to see the difference.

The first way to fix this is to remove all line breaks between the closing tag and the next opening tag on each link, although it is annoying to look at in your code:

<a class="w-tab-link w-inline-block tab-link" data-w-tab="Tab 1">
  <div>Tab 1</div>
</a><a class="w-tab-link w-inline-block tab-link" data-w-tab="Tab 2">
  <div>Tab 2</div>
</a><a class="w-tab-link w--current w-inline-block tab-link" data-w-tab="Tab 3">
  <div>Tab 3</div>
</a>

The next option (probably best looking in terms of code) is to edit the CSS to make the tabs float leftwards. You can actually do this in webflow if you want by adding a class to your tab links and your tab content container and applying the styles:

.w-tab-link {
  float: left;
}
.w-tab-content {
  clear: both;
}

I’ve not currently found any other easy ways around this, but I’ve been having to do this in a lot of my sites recently.

Adam

2 Likes