CODEWITHSUNDEEP
css
MarksCode
MarksCode

Reputation: 8576

Padding and margin right 0, chrome shows otherwise

I have a content div within a main wrapper div. I've set both the margin-right and paddding-right to 0 on the content div, yet chrome still shows it extends to the end of the wrapper div, even passed it a little:

div

I'm trying to understand why this is. The Css for the outer and inner divs looks like this:

#Inner {
    position: relative;
    width: 40%;
    height: 70%;
    top: 3%;
    margin-left: 2%;
    margin-right: 0;
    padding-right: 0;
    text-align: center;
}
#outer {

    height:80vh;
    width:50vw;
    position:absolute;
    border-radius:5%;
    border:3px solid black;
    left:50%;
    transform:translate(-50%, 0);
    top:10%;
    background: linear-gradient(to bottom, #304352, #525252);
}

Is this just something to do with chrome or does the inner div really extend so far, even passed the wrapper?

Upvotes: 1

Views: 969

Answers (1)

MarksCode
MarksCode

Reputation: 8576

After a bit of research, I've found out that adding the display property of inline-block seemed to take away the right margin. I guess I still have more to understand about the block model.

Upvotes: 1

Related Questions