1

https://jsfiddle.net/38h8acaq/

How do I remove the white space to the left of the first tab and between the tabs and the content? You will see I have inserted a lot of margin:0px; lines into the CSS but none of them will remove the whitespace.

<div class="tabs"> <ul class="tab-links"> <li class="active"><a href="#tab1">Tab #1</a> </li> <li><a href="#tab2">Tab #2</a> </li> <li><a href="#tab3">Tab #3</a> </li> <li><a href="#tab4">Tab #4</a> </li> </ul> <div class="tab-content"> <div id="tab1" class="tab active">Content tab1</div> <div id="tab2" class="tab">Content tab2</div> <div id="tab3" class="tab">Content tab3.</div> <div id="tab4" class="tab">Content tab4</div> </div> </div>
Improve this question
1
  • As good practice you should use a CSS reset stylesheet which resets all computed styles. cssreset.com This will resolve this issue. Commented Aug 2, 2015 at 10:27

5 Answers 5

Reset to default
2

Have you tried padding-left: 0px? Seems to work here.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you, I knew It would be something simple!
1

change 

.tab-links ul { margin: 0px; }

to

.tabs ul{ margin:0px; }

html to explain

 <ul class="tab-links"> <li class="active"><a href="#tab1">Tab #1</a> </li> </ul>

Reason. You selected a ul after the .tab-links ul so I toke the parent element of the ul you need and I used that to select the ul you need

updated fiddle

Improve this answer

1 Comment

Thank you, I knew It would be something simple!
1

You can add the following css to remove the space from first left tab:

.tab-links { margin-left:0; padding-left:0; } .tab-links li:first-child { margin-left:0; }

Here is the updated fiddle: https://jsfiddle.net/38h8acaq/1/

Improve this answer

Comments

0

as for your first question

you have a padding-left:40px on tab links,

reset it with .tab-links{padding:0}

Improve this answer

Comments

0 

.tabs { width: 100%; display: inline-block; } /*----- Tab Links -----*/ /* Clearfix */ .tab-links:after { display: block; clear: both; content:''; } ul.tab-links { padding: 0; margin: 0px; } .tab-links li { margin: 0px 5px; float: left; list-style: none; margin-bottom:0px; } .tab-links li:first-child{ margin-left: 0; } .tab-links a { padding: 9px 15px; display: inline-block; border-radius: 2px 2px 0px 0px; background: #7FB5DA; font-size: 16px; font-weight: 600; color: #4c4c4c; transition: all linear 0.15s; margin:0px; } .tab-links a:hover { background: #a7cce5; text-decoration: none; } li.active a, li.active a:hover { background: #da7fca; color: #4c4c4c; } /*----- Content of Tabs -----*/ .tab-content { margin: 0px; padding: 10px; border-radius: 2px; background: #ff0005; } .tab { display: none; margin: 0px; } .tab.active { display: block; }
<div class="tabs"> <ul class="tab-links"> <li class="active"><a href="#tab1">Tab #1</a> </li> <li><a href="#tab2">Tab #2</a> </li> <li><a href="#tab3">Tab #3</a> </li> <li><a href="#tab4">Tab #4</a> </li> </ul> <div class="tab-content"> <div id="tab1" class="tab active">Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</div> <div id="tab2" class="tab">Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</div> <div id="tab3" class="tab">Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</div> <div id="tab4" class="tab">Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</div> </div> </div>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.