weird margin appearing on body element

Asked Oct 28 '19 at 22:46

Active Oct 28 '19 at 22:49

Viewed 242 times

So my problem is real real simple. I was getting confused why there seemed to be a margin on the page after I added the ul element into the nav bar in this example. I'm sure there is a simple reason for this, but I'd like to know why this is happening, for future reference. Thanks for helping satisfy the curiosity!

html,
body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    background: purple;

    -webkit-box-shadow: -1px 4px 4px 2px rgba(0, 0, 0, 0.36);
    box-shadow: inset -1px 4px 4px 2px rgba(0, 0, 0, 0.36);
}

div.nav__wrapper {
    position: relative;
    width: 74%;
    height: 4em;
    margin: auto;

    top: 50%;
    transform: translateY(-50%);
}

nav {
    width: 100%;
    height: 100%;

    background-color: black;
}

ul {
    display: flex;
    height: 100%;
    width: 100%;
}

<div class="nav__wrapper">
    <nav>
        <ul></ul>
    </nav>
</div>

asked Oct 28 '19 at 22:46

Leviathan_the_Great

1

a complex margin-collapsing issue .. default margin of ul collapsing with nav and then collapsing with body. Since you are translating the element, it's difficult to notice – Temani Afif Oct 28 '19 at 22:48
1

simply add `margin:0` if you don't want headaches understanding this – Temani Afif Oct 28 '19 at 22:49
`margin:0` on what element?. Also,thank you both, I've never seen this before and just wanted to know what was causing it next time I see it – Leviathan_the_Great Oct 28 '19 at 22:53
on the `ul` element that is having a default margin – Temani Afif Oct 28 '19 at 22:56
Should have assumed that, thanks man! – Leviathan_the_Great Oct 28 '19 at 22:56

weird margin appearing on body element

0 Answers0