why same css not used for both circles - html

Question

I have a very basic question, which will help me understanding the CSS entirely,I believe. Below is the CSS and HTML for my code.
.vl {
border-left: 6px solid yellow;
height: 100px;
margin-bottom: none;
}
.circle {
border: 2px solid #666666;
border-radius: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
width: 17px;
height: 17px;
z-index: 86;
margin-left: -7px;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
}
<div class="vl"></div>
<div class="circle" />
<div class="vl" style="margin-top: 18px; margin-left: 4.8px;"></div>
Now, the results appear like this:
After that When I add another circle div <div class="circle"/>. Results looks like this:
I have two queries based upon my results:
Why my second circle didnt appear in the same margins to the left as the first one? I am using same css.
How do we create elements like circles or lines, that whenever we use them they perfectly aligns to the elements next to them automatically. I have seen this but never gets it.
Please refer to image below:
,
as soon as I'm adding more divs of same classes, it looses its colors, the colors are getting lighter.

Answer 1

This is happening to you because you have used an invalid HTML tag. <div /> is not a valid tag whereas you should have used <div></div>.
Follow this MDN web docs link to find the actual use cases:
Tag omission: None, both the starting and ending tag are mandatory.
When you correct this problem, all the classes you will declare, and how many times you call them, that doesn't matter, all of them will have same styling, like- in your case, same margin, no color fading, etc. Try it out:
.vl {
border-left: 6px solid yellow;
height: 100px;
margin-bottom: none;
}
.circle {
border: 2px solid #666666;
border-radius: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
width: 17px;
height: 17px;
z-index: 86;
margin-left: -7px;
}
<h2>Vertical Line</h2>
<div class="vl"></div>
<div class="circle"></div>
<div class="vl"></div>
<div class="circle"></div>
<div class="vl"></div>
<div class="circle"></div>
<div class="vl"></div>
<div class="circle"></div>