Eliminate margin when commenting

Question

I am getting unwanted margin horizontally on my li a elements when I put a comment next to the code in the .html file. When I remove it, the margin goes away. What is going on, and is there a way I can add comments without affecting the display? Here is the code, where the comment is in the li rule:

<!DOCTYPE html>

 <html lang="en">

 <head> 
   <meta charset="utf-8">
   <meta name=”viewport” content=”width=device-width”>   
   <title>Test Navigation</title>

   <style>

ul {                   
    list-style-type: none;
    margin: 0;
    padding: 0; 
    background-color: white;
    position: absolute;
}

li {    
    display: inline-block;    <!--allows you to display like an inline but you can add width and height-->  
    float: left;
    border: 1px solid red;

}

li a {
  display: block;
  font-size: 1.3rem;
  text-align: center; 
  min-width:140px;
  height: 50px;
  line-height: 50px;  
  border: 1px solid black;

}   
   </style>
 </head>

 <body>


            <ul>
              <li><a class="active" href="#" >HOME</a></li>
              <li><a href="#">VIDEOS</a></li>           
              <li><a href="#">DOCUMENTS</a></li>
              <li><a href="#">SCTE</a></li>
              <li><a href="#">TRAINING</a></li>           
              <li><a href="#">EVENTS</a></li>            
            </ul>



 </body>

 </html>

Add this to your `ul`: `font-size:0;` https://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items — admcfajn, Oct 19 '17 at 20:58
Possible duplicate of [A Space between Inline-Block List Items](https://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items) — admcfajn, Oct 19 '17 at 20:59

score 2 · Accepted Answer · answered Oct 19 '17 at 20:59

That part of the code is CSS and here the comments must be enclosed between /* */, not . Currently that line is being ignored by the browser.

e.g.

display: inline-block; /* allows you to display like an inline but you can add width and height */

score 1 · Answer 2 · 2017-10-19T21:00:42.870

1

you are in css (style tags) so style and script is /* */ html (other html codes) is <!— —> for css on your file use /* and */
hope it helped!

display: inline-block; /* allows you to display like an inline but you can add width and height */

edited Oct 19 '17 at 21:00

answered Oct 19 '17 at 20:59

"_you are in css html is for css_" What? – takendarkk Oct 19 '17 at 21:00

Eliminate margin when commenting

2 Answers2