Css property border doesn't work properly on span elements

Question

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.

Answer 1

12 line seems selector * interrupts all styles, look in the developer tool in your browser.

Answer 2

safranek You wrong borders can have all tags.
https://code.sololearn.com/WXR9dy46Ryf3/?ref=app

Answer 3

69 line you forgot to close <div class = "todo">

Answer 4

Add display: inline-block;
in .label

Answer 5

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; */
}

Answer 6

It still doesn't work

Answer 7

<span> is inline tag. Inline tags don't have border. You cane change it to block element.

Answer 8

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
-->