htmlcssliveserver

having problem regarding CSS and live server

In the following HTML code, when I open it in the Live Server extension in Visual Studio Code, it creates two extra <div> elements that I didn't explicitly create. I only created three <div> elements. However, when I use a CSS selector, the problem seems to be resolved.

why this is happening?

could you please provide solution for that without using any kind of CSS selectors or thing

I'm curious to understand why the Live Server was generating these extra <div> elements and why using a CSS selector appeared to resolve the issue.

my code output in my local system browser

enter image description here

This is the live server inspect section code

enter image description here

when you open the live server image then you will find two extra div. i don't know why this is happening

my HTML code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Practice</title>
</head>
<style>
  div {
    height: 100px;
    width: 400px;
    background-color: grey;
    border: 2px solid black;
  }
</style>

<body>
  <div></div>
  <div></div>
  <div></div>
</body>

</html>

I have been working on a web development project, and I encountered an issue with the Live Server extension in Visual Studio Code. In my HTML code, I created three <div> elements to display on the webpage. However, when I opened the code using the Live Server, I noticed that two additional <div> elements were automatically generated, resulting in a total of five <div> elements being displayed on the webpage.

My intention was to have only the three <div> elements that I explicitly created in my HTML file, without any additional ones being added by the Live Server or any other factor.

Interestingly, I found that when I used a CSS selector to style the <div> elements, the issue seemed to be resolved, and only the three original <div> elements were displayed as expected.

Solution

  • That is happening because you have this chrome extension installed that is generating that <div> tag.

    When you open the page locally, the extension does not load. But when you load the page on the live server, the browser extension executes its code, and adds that <div> there.

    The <div> tag will only appear on your computer (Unless your visitors have that extension installed as well of course). If you really don't want that tag there, either disable the extension on your site, or delete it from your browser entirely (Using a different browser that does not have the extension installed is also an option).