CODEWITHSUNDEEP
htmlcss
atf98
atf98

Reputation: 143

IDE insert white space and the browser read them as char how to get rid of it? i'm using VSCode

When I'm trying to make navbar there was a problem with space which I don't know from where it came!

I set the margin to 0 and the padding nothing happened also box-sizing to border-box no luck !

1: enter image description here

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

body {
    background-color: darkblue;
}

nav {
    width: 100%;
    background-color: #f8f8f8;
    border-bottom: 1px #e7e7e7 solid;
    color: #777;
}

.logo,
.navbar {
    display: inline;
}

.logo {
    padding: 20px;
}

.navbar {
    width: 100%;
}

.navbar li {
    list-style-type: none;
    display: inline-block;
    padding: 20px;
}

Upvotes: 2

Views: 90

Answers (4)

Xtra 514
Xtra 514

Reputation: 1

there is native space between these elements.

anyway u should do like this

.navbar li {
    list-style-type: none;
    display: inline-block;
    padding: 20px;
    content :""
}

Upvotes: 0

NeX'T'iME
NeX'T'iME

Reputation: 176

Doing this would solve it for you!

.navbar li {
    list-style-type: none;
    display: inline-block;
    padding: 20px;
    content: "";
}

Upvotes: 2

A. Stanley
A. Stanley

Reputation: 1

Set the width the body of the html like this body {width : 100vw} this will set it to 100 view width of your browser and remove the unexpected spaces. I hope this helps

Upvotes: 0

Ruan Montelo
Ruan Montelo

Reputation: 191

Since these elements have a "native" spacing between them, you can give your nav-item class a negative margin, like so:

.nav-item {
  margin: -7px;
}

And since doing this will probably affect the parent element <nav>, you can set the parent element's height manually, so it keeps the element at the height (or size) you want:

nav {
    width: 100%;
    background-color: #f8f8f8;
    border-bottom: 1px #e7e7e7 solid;
    color: #777;
    height: 55px; /*This property should set the height to your nav element*/
}

Hope it helps!

Upvotes: 1

Related Questions