why does these codes have different behaviours?

Question

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins' , sans-serif;
}
header{
    height: 10vh;
    width: 90%;
    margin: auto;
    align-items: center;
    display: flex;
}

nav {
    flex:1;
    background-color: darkorchid;

}
.nav-links {
    display: flex;
    justify-content: space-around;
    list-style: none;
}
.nav-link {
    color: #5f5f79;
    font-size: 18px;
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="decorate.css">
        <meta charset="utf-8">
        <title>Hello world</title>
    </head>
    
    <body>
        <header>
                
                
                <nav>
                    <ul class = "nav-links">
                        <li ><a class="nav-link" href="#">education</a></li>
                        <li ><a class="nav-link" href="#">work</a></li>
                        <li ><a class="nav-link" href="#">certificates</a></li>
                    </ul>
                </nav>
                    
                
            
            </div>
        </header>
    </body>


</html>

This outputs the expected results with the space between navigation links . whereas the below code has a different output when div is included.

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins' , sans-serif;
}
header{
    height: 10vh;
    width: 90%;
    margin: auto;
    align-items: center;
    display: flex;
}

nav {
    flex:1;
    background-color: darkorchid;

}
.nav-links {
    display: flex;
    justify-content: space-around;
    list-style: none;
}
.nav-link {
    color: #5f5f79;
    font-size: 18px;
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="decorate.css">
        <meta charset="utf-8">
        <title>Hello world</title>
    </head>
    
    <body>
        <header>
            <div class="container">
                
                
                <nav>
                    <ul class = "nav-links">
                        <li ><a class="nav-link" href="#">education</a></li>
                        <li ><a class="nav-link" href="#">work</a></li>
                        <li ><a class="nav-link" href="#">certificates</a></li>
                    </ul>
                </nav>
                    
                
            
                </div>
            </div>
        </header>
    </body>


</html>

why does including the tag give a different output even when the div tag is not used in CSS . I am novice , so I might not be understanding some of the concepts in both HTML and CSS .

well, changing the HTML will change the output, as simple as that — Temani Afif, Sep 25 '20 at 10:48
the div has no behaviour specified so it will basically just grow with its content, the content has no further behaviour that would make the div grow larger than the text — Warden330, Sep 25 '20 at 10:49
As mentioned above, putting the nav bar inside of a container div does just that, contains it, and because the container is the parent element here, it will control the length of the nav bar as shown in your examples — GeorgeB, Sep 25 '20 at 10:52

score 0 · Accepted Answer · answered Sep 25 '20 at 10:48

header has display: flex wich is why the nav can grow, if you put the container div around the nav without display flex. it cant anymore. adding display: flex to the container fixes this issue

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins' , sans-serif;
}
header{
    height: 10vh;
    width: 90%;
    margin: auto;
    align-items: center;
    
}
.container{display: flex;}

nav {
    flex:1;
    background-color: darkorchid;

}
.nav-links {
    display: flex;
    justify-content: space-around;
    list-style: none;
}
.nav-link {
    color: #5f5f79;
    font-size: 18px;
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="decorate.css">
        <meta charset="utf-8">
        <title>Hello world</title>
    </head>
    
    <body>
        <header>
            <div class="container">
                
                
                <nav>
                    <ul class = "nav-links">
                        <li ><a class="nav-link" href="#">education</a></li>
                        <li ><a class="nav-link" href="#">work</a></li>
                        <li ><a class="nav-link" href="#">certificates</a></li>
                    </ul>
                </nav>
                    
                
            
                </div>
            </div>
        </header>
    </body>


</html>

score -1 · Answer 2 · answered Sep 25 '20 at 10:53

-1

because div is a block element that means it sets your tag into a block or a square which uses the whole line where as without div it works as inline elements which only occupy the space bounded by the tags

answered Sep 25 '20 at 10:53

Ansari Musaddiqa Abdullah

1
1

why does these codes have different behaviours?

2 Answers2