Nuevo en la codificación HTML/CSS. Cada vez que conecto este código en el CMS que estoy usando, hay espacios en blanco entre las pestañas. Conecté el código a editores en línea aleatorios que no muestran los espacios en blanco en el medio. ¿Qué estoy haciendo mal?
(Me está obligando a escribir más detalles). El CMS que estoy usando fue desarrollado por una pequeña empresa independiente, por lo que existen algunas limitaciones en las capacidades de edición. No estoy seguro si eso tiene algo que ver con eso.
quiero: 1
Tengo (puedes ignorar el cambio en los títulos): [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>En primer lugar, no pude reproducir el problema porque no tengo espacios en blanco entre las pestañas.
De todos modos, supongo que este espacio en blanco se eliminará si establece el margin de las etiquetas en 0 .
.mytabs>label { margin: 0 !important; }