Why is there space between tabs?
Question
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>
1 answers
solution1
1 2022-07-25 05:10:01
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 }
solution2
-1 2022-07-25 05:21:29
i think you should try reset css: https://meyerweb.com/eric/tools/css/reset/ copy this and paste to the top of your css.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.