Tips for eliminating unnecessary white space using CSS

https://jsfiddle.net/38h8acaq/

Is there a way to eliminate the white space on the left of the first tab and between the tabs and the content? Despite adding several margin:0px; lines to the CSS, none seem to be effective in removing the unwanted 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>
htmlcss

Answer №1

Perhaps you could experiment with padding-left: 0px? It appears to be effective in this case.

Answer №2

modify 

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

to

.tabs ul{
   margin:0px;
}

illustrate with HTML

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

    </li>      
</ul>

Explanation. I noticed that the ul you needed was not directly under the selector so I adjusted the CSS accordingly by selecting the parent element of the necessary ul.

updated fiddle

Answer №3

To eliminate the space from the first left tab, you can apply the following CSS:

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

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

You can view the updated example here: https://example.com/updated

Answer №4

Regarding your initial inquiry,

The tab links currently have a style of padding-left:40px,

To override this, use the following code .tab-links{padding:0}

Answer №5

.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">Enjoy the beauty of nature and discover its wonders. Explore breathtaking landscapes and captivating wildlife species. Immerse yourself in the tranquility of untouched environments.</div>
    <div id="tab2" class="tab">Experience thrilling adventures and adrenaline-pumping activities. Challenge yourself with daring feats and embark on unforgettable journeys into the unknown.</div>
    <div id="tab3" class="tab">Delve into rich cultural heritage and traditional customs. Witness the vibrant tapestry of diverse communities and celebrate the unique traditions that define them.</div>
    <div id="tab4" class="tab">Indulge your senses with delectable cuisines and culinary delights. Savor the flavors of exotic dishes and taste the essence of different culinary heritages from around the world.</div>
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Javascript function I created references a variable that seems to be undefined in the code

Recently, I discovered a function that is triggered with an onclick event using "openNav()" from an HTML element. Below is the code snippet for this function: function openNav() { document.getElementById("nav-drawer").classList.add("nav-drawer-open"); ...

javascripthtmlvariables

Troubleshoot: Why is my Bootstrap 3 responsive navigation bar not functioning

When using drop down items that are longer in length, they tend to wrap down to the next level rather than overflowing. I am not well-versed in @media queries, but I've noticed that on mobile devices the dropdown collapses in the navigation menu, whil ...

csstwitter-bootstraptwitter-bootstrap-3

What purpose does '& .MuiTextField-root' serve within the { makeStyles } function of Material UI?

I've been working on a React JS project using Material-UI and came across some interesting styling in my Form.js file. Here's a snippet of the code: import useStyles from './styles'; const classes = useStyles(); <form autoCapitali ...

cssreactjsmaterial-ui

What could be the reason for the absence of margin on the top and bottom

.separator { border: 1px solid #000000; margin: 10px; } <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Separator</title> </head> <body> &l ...

htmlcss

Printing a modified div element that was created using jQuery on an ASP.NET MVC webpage after the initial page has finished loading

In my view, there is a div that holds multiple tables generated based on the model. Each row in these tables contains fields that can be edited using TextBoxFor. Through jQuery, rows can be moved between tables and new tables can be created dynamically wit ...

javascriptjqueryhtmlasp.net-mvc

Integrating blade code within blade code

Struggling to craft a button using the Form builder. {!! Form::button('<span style="color: {!! $colour[$i] !!}" class..') !!} The specific details of the button don't matter, all I wanted was to adjust the font color to $colour[$id]. Th ...

phphtmlcsslaravel-blade

Scrolling in Bootstrap 4 Cards conceals the fixed Header

Here's some HTML code featuring Bootstrap 4 elements. It showcases a fixed Header and Footer with scrollable Bootstrap Cards in between. When scrolling, the Headers may be hidden by the Cards. How can you adjust the layout so that the Cards scroll "be ...

htmlcssbootstrap-4scrollbootstrap-cards

Can Angular components be used to replace a segment of a string?

Looking to integrate a tag system in Angular similar to Instagram or Twitter. Unsure of the correct approach for this task. Consider a string like: Hello #xyz how are you doing?. I aim to replace #xyz with <tag-component [input]="xyz">&l ...

javascripthtmlangulartypescript

What is the best way to use a computed property as a style value for a component in Vue.js?

My component's template includes the following HTML element: .grid-item(:style="{ width: columnWidth, backgroundColor: 'blue' }") I want to dynamically set the width of this element using a computed property: computed: { columnWidth () ...

javascriptcssvue.js

What is the best way to arrange elements based on the numeric value of a data attribute?

Is there a way to arrange elements with the attribute data-percentage in ascending order, with the lowest value first, using JavaScript or jQuery? HTML: <div class="testWrapper"> <div class="test" data-percentage="30&qu ...

javascripthtmljquery

Prevent the underlining of the :before content of a link from being affected by a rule applied to the link

I have a hyperlink that becomes underlined when hovered over. I want to add a > symbol before the link, but I don't want it to be underlined when the link is hovered. Here's the code I'm using: .box.blueb a { color: #0098aa; } .box.blueb ...

csshyperlinkunderline

The never-ending scroll feature in Vue.js

For the component of cards in my project, I am trying to implement infinite scrolling with 3 cards per row. Upon reaching the end of the page, I intend to make an API call for the next page and display the subsequent set of cards. Below is my implementatio ...

htmlcsstypescriptvue.jsinfinite-scroll

How to Implement Transition Effect for Height Changes on v-if in Vuejs

I have a code snippet that effectively animates a v-if element by reducing its height to 0px. The animation is working well, but the issue arises when I need to specify the initial height of the element in CSS. While this is fine for a single element, I ...

cssanimationvuejs2vue.js

Using the margin property creates an odd spacing issue that seems out of place

Here is the HTML and CSS code that I am using: div { background: yellow; width: 77px; height: 77px; border: 1px dotted red } #one { margin: 0px 21px 41px 41px } <html> <head> <meta charset="UTF-8"> ...

htmlcssmargin

Customizing Background Color of Bottom Tab Content Container in React Native

Hey there, I need some help with changing the color of the bottom tabs screens. They are currently gray by default (as shown in the image) and I want them to be white. I've tried using tabBarStyle but it doesn't seem to work. If anyone has any i ...

cssreact-native

Navigating an indefinite amount of state variables in React.js: A comprehensive guide

Receiving data from the server with an unknown number of items in the API leads me to utilize the map method in HTML for rendering. Below is the return section: if (loading) { return ( <div> <div> <Header /> ...

javascripthtmlnode.jsreactjs

The Navbar's Toggle Icon Causes Automatic Window Resize

I implemented a mobile navigation bar using React and JS that slides in from the left when clicked. However, I encountered two issues: whenever I click on a menu button in the navbar or when my ad carousel moves, the window resizes for some reason. Additio ...

javascriptcssreactjs

What is the best way to use margin-top and margin-bottom in CSS?

Looking to perfectly center this modal in the middle of the screen with some margin all around. However, struggling to apply margin specifically to the top and bottom! export function Modal() { return ( <div className="fixed inset-0 z-[60] ...

cssreactjstailwind-css

Adjusting the height of content in Angular Material 2 md-tab

I've recently started working with angular material and I'm facing an issue while trying to implement md-tab into my application. The problem is that I can't seem to style my tab content to take up the remaining height of the screen. Could s ...

javascriptcssangularangular-material

How can I ensure that the size of the Dropdown Menu Item matches its parent in both Bootstrap and CSS styles?

I am working on a navigation bar that has a dropdown menu which appears on hover. I want the size of the dropdown menu items to match the size of the parent element. Here is an image for reference: https://i.stack.imgur.com/oNGmZ.png Currently, the "One ...

javascriptjqueryhtmlcsstwitter-bootstrap