New to HTML/CSS coding. Every time I plug this code into the CMS I am using, there are white spaces in between the tabs. I have plugged the code into random online editors which does not show the white spaces in between. What am I doing wrong?
(It's forcing me to write more details). The CMS I am using was developed by an independent, small company so there are some limitations to the editing capabilities. Not sure if that has anything to do with it.
I want: 1
I have (you can ignore the change in titles): [2]
<style>
body {
background: #fff;
font-family: 'Arial';
}
.mytabs {
display: flex;
flex-wrap: wrap;
max-width: 1000px;
margin: 50px auto;
padding: 0px;
}
.mytabs input[type="radio"] {
display: none;
float: left;
}
.mytabs label {
padding: 25px;
background: #612141;
font-weight: bold;
color: #fff;
}
.mytabs .tab {
width: 100%;
padding: 20px;
background: #fff;
order: 1;
display: none;
border: solid;
border: 3px solid #a6192e;
}
.mytabs .tab h2 {
font-size: 2em;
}
.mytabs input[type='radio']:checked + label + .tab {
display: block;
}
.mytabs input[type="radio"]:checked + label {
background: #c1a91e;
}
</style><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="mytabs">
<input type="radio" id="tabbananas" name="mytabs" checked="checked">
<label for="tabbananas">Bananas</label>
<div class="tab">
</div>
<input type="radio" id="tabapples" name="mytabs">
<label for="tabapples">Apples</label>
<div class="tab">
</div>
<input type="radio" id="taboranges" name="mytabs">
<label for="taboranges">Oranges</label>
<div class="tab">
<p> </p>
</div>
</div>
</div>
</body>
</html>First of all I couldn't reproduce the issue because it has no whitespace between tabs for me.
Anyway, I guess this whitespace will be removed if you set labels margin to 0.
.mytabs>label {
margin: 0 !important;
}