Menu
I am trying to reduce the margins between and within a couple of select boxes. So it is the margin between the selects and inside the select. If I shrink the width of the select, it cuts off the selected option but leaves the margin.
<html>
<body>
<select>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
</select>
<select>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select>
</body>
</html>
How can I make this:
Look like this:
313
It's realy dificult to style a select element because every browser make it different.
however I have change de text-indent and width properties to delete space IN the elelment.
select {
margin: 0 -2px;
text-indent:-2px;
width: 38px;
}
Too late but for those that have the same issue, just place some html comments between block. The problem is the same that you can have with inline-block blocks. If there is any character between two blocks, even a tabulation or a \n, you have whitespace on screen.
Solution:
-Put everything on one line:
<html>
<body>
<select><option>11</option><option>12</option><option>13</option<option>14</option</select><select><option>15</option><option>16</option><option>17</option><option>18</option></select>
</body>
-Put html comment between blocks:
<html>
<body>
<select>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
</select><!--
--><select>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select>
</body>
</html>
answered Sep 18 '25 15:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With