border is not showed

Question

I have this code html
<span>2007 <br> 2008 <br> 2009<br> 2010</span>
and for this i have css code
span { border-right: solid 5px black;}
but when it runs border is represented only near number 2010 not only near whole column
why that ?

Answer 1

The <span> element is of type 'inline'... so <br> inside is not very logical (you break the inline specificity) ;)

Anyway, trying to put border on all side (border:solid 2px red;) will show you how inlined element borders are handled ^^
So, to have border on whole right side in whole height of <span>, it need to be of type 'block' (as a <div>, that you could use instead), but in this case, width of element is default whole width available, so right border will be on most right... probably not your expect ;P

To join behaviour of 'block' elements for the border, and behaviour of 'inline' elements for auto-width, you can use the css 'display:inline-block' property/value:

span {
border-right: solid 5px black;
display:inline-block;
}

Answer 2

You have the border aligned to the right where you typed

border-right: solid 5px

Answer 3

sorry I don't understand your answer

Answer 4

Here is an example of how to create borders around data, Also you should be using a table instead of a span

https://code.sololearn.com/Wm8hD2a7m1FZ/#html

Answer 5

thanks ! I mean I want border on the whole right side not only near 2010

Answer 6

thanks for answer

Answer 7

thanks !