Why is there space between tabs?-CodePudding

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 >
    <input type="radio" id="tabbananas" name="mytabs" checked="checked">
    <label for="tabbananas">Bananas</label>
    <div >
    </div>

    <input type="radio" id="tabapples" name="mytabs">
    <label for="tabapples">Apples</label>
    <div >
    </div>

    <input type="radio" id="taboranges" name="mytabs">
    <label for="taboranges">Oranges</label>
    <div >


<p>&nbsp;</p>
</div>
    </div>

  </div>
</body>
</html>

CodePudding user response：

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;

}

CodePudding user response：

i think you should try reset css: https://meyerweb.com/eric/tools/css/reset/ copy this and paste to the top of your css.