Css property border doesn't work properly on span elements | Sololearn: Learn to code for FREE!
¡Nuevo curso! ¡Todo programador debería aprender IA Generativa!
Prueba una lección gratuita
0

Css property border doesn't work properly on span elements

Here is my code https://code.sololearn.com/W0xPZ5nvmDua/?ref=app. I want to give 1px wide border to span elements with 'label' class but its top and bottom border doesn't show. I set 0 margin but still there's some gap between them.

30th Jul 2019, 6:27 PM
Vikash Pal
Vikash Pal - avatar
8 Respuestas
+ 3
12 line seems selector * interrupts all styles, look in the developer tool in your browser.
30th Jul 2019, 8:47 PM
Anna/–ź–Ĺ—Ź
Anna/–ź–Ĺ—Ź - avatar
+ 2
safranek You wrong borders can have all tags. https://code.sololearn.com/WXR9dy46Ryf3/?ref=app
31st Jul 2019, 7:20 AM
Anna/–ź–Ĺ—Ź
Anna/–ź–Ĺ—Ź - avatar
+ 1
69 line you forgot to close <div class = "todo">
30th Jul 2019, 6:47 PM
Anna/–ź–Ĺ—Ź
Anna/–ź–Ĺ—Ź - avatar
+ 1
Add display: inline-block; in .label
30th Jul 2019, 10:54 PM
Calvi’≤
Calvi’≤ - avatar
+ 1
Inline can shows border on 4 sides too. The program cannot be viewed the upper and lower border was due to the parent element set with overflow:hidden; Try to remove overflow:hidden, inline children would show all the border lines. .todo .labels { position: relative; left: 0; top: 0; margin-top: 16px; display: block; max-width: 100%; /* overflow: hidden; */ }
31st Jul 2019, 8:17 AM
Calvi’≤
Calvi’≤ - avatar
0
It still doesn't work
30th Jul 2019, 7:30 PM
Vikash Pal
Vikash Pal - avatar
0
<span> is inline tag. Inline tags don't have border. You cane change it to block element.
30th Jul 2019, 11:09 PM
safranek
0
Calvi’≤ <!-- without adding display: inline-block to .label and without removing overflow: hidden; from .labels problems for .label:- 1. padding-top and padding-bottom not working 2. margin: 0; but still there is some gap between .label 3. border-top and border-bottom not working --> <!-- After removing overflow: hidden; from .labels (display: inline-block; was not added to .label) problems for .labels:- margin-top not working. problems for .label:- margin: 0; but it looks like margin-top is applied and gaps are still there between .label padding-top and padding-bottom still not working --> <!-- After adding display: inline-block; to .label (overflow: hidden; was not removed from .labels) problems for .label:- evertything is fine but gaps are still there between .label -->
31st Jul 2019, 9:48 AM
Vikash Pal
Vikash Pal - avatar