CODEWITHSUNDEEP
htmlcss
Anthony Hulett
Anthony Hulett

Reputation: 57

HTML / CSS Padding for <section> isn't working

screenshot of problemThe padding in the section that will contain the content of the page goes from end to end with no space from the edge.

HTML:

<section>
    <heading>
        <h2>Welcome to Funky Munky!</h2>
    </heading>
    <article>
        <p>
            New in Cedar City, UT
        </p>
    </article>
</section>

CSS:

section {
    width: 100%;
    margin: 1% 0;
    padding: 2%;
    background-color: #f5c300;
    opacity: 0.7;
    color: #000;
    text-align: center;
}

Upvotes: 1

Views: 942

Answers (5)

apo11oCreed
apo11oCreed

Reputation: 169

Looks like you could accomplish the same effect by adjusting your width to mimic the presence of padding/margin. Just remove left/right padding and center the section with margin auto:

section {
width: 96%;
margin: 1% auto;
padding: 2% 0;
background - color: #f5c300;
opacity: 0.7;
color: #000;
text-align: center;

}

Upvotes: 0

Pro Dev
Pro Dev

Reputation: 684

Try this, 

section {
    width: 98%;
    margin: 2% 2%;
    padding: 0%;
    background-color: #f5c300;
    opacity: 0.7;
    color: #000;
    text-align: center;
}

Upvotes: 0

Wayne Kaskie
Wayne Kaskie

Reputation: 3483

I'm assuming you want the "orange" box to have some space around it.

The issue here is that the padding setting exists "within" your section. In other words, the spacing from the edge that it creates will all be within the orange box. The contents of the box, however, will be forced inwards, away from the edge.

If you want white space around the outside of the box, I suggest changing the margin to 1% 1% (the second 1% is for your left and right side)...or some higher number for more space and lowering the width by the margin% X 2 + (padding%*2). In this case, width will be 88% (to allow for 1% space on either side).

like this:

width: 88%; /* padding x2=10 + margin*2 = 2 */
margin: 1% 1%;
padding: 5%;

This fiddle demonstrates this using two margin and padding settings that yield the same sized box. https://jsfiddle.net/wkaskie/wdarLbpt/1/

Upvotes: 0

Drown
Drown

Reputation: 5982

Use box-sizing: border-box : 

section {
    width: 100%;
    margin: 1% 0;
    padding: 2%;
    background-color: #f5c300;
    opacity: 0.7;
    color: #000;
    text-align: center;
    box-sizing: border-box;
}

Without that, the 2% padding on each side is added to the 100% width of the box, so it has a total width of 104% and is thus larger than the page.

Update

Since you've posted an image of the problem, it seems that you want some spacing between the edge of the page and the box itself. Is that correct?

If it is, change the margin to margin: 1% instead of margin: 1% 0. Then, change the width to 98% (100% - 1% on each side).

As you have it set now, there's a 1% margin above and below the element, but no margin to the left and right of it.

The padding is for the inner spacing (spacing between the edges of the box and the content inside it), margin is the space between the edge of the box and the other elements outside.

Upvotes: 3

Shivani
Shivani

Reputation: 347

Change width to 94% margin: 1%

so that 1% of space will be gone for margin on each side(2%) and for padding 2% on each side (4%)

Therefore, width = 100 - 2 - 4 = 94%

section {
    width: 94%;
    margin: 1%;
    padding: 2%;
    background-color: #f5c300;
    opacity: 0.7;
    color: #000;
    text-align: center;
}
<section>
        <heading>
            <h2>Welcome to Funky Munky!</h2>
        </heading>
        <article>
            <p>
                New in Cedar City, UT
            </p>
        </article>
    </section>

Upvotes: 0

Related Questions