6
Contributors
5
Replies
17
Views
4 Years
Discussion Span
Last Post by diafol
1
-------------------
|     padding     |
|                 |
|                 |
|                 |
-------------------
margin

Padding moves items inside the element away from the border of the element.
Margin moves items away from other items.

0

margin affects the height and width of an element. Whereas padding affects the space inside the element for the child elements to fill.
Say if you had a parent div with the class "parent" and some text inside it:

<html>
    <body>
        <div class="parent">
            <h1>A header which will be contained within the parent div</h1>
            <h2>a sub heading</h2>
        </div>
    </body>
</html>

with the styling as follows:

div.parent {
    height:180px;
    width:400px;
    padding:15px;
    margin:20px;
}

the padding will give the text inside the "parent" div less room to fill.
the margin will push the "parent" div away from other elements so if there was a specific space the div had to fill (400x180) it will actually fill (440x220) because of the margins all round.

I hope this helps.

0

In addition to the information that's already been presented in this thread, I think a visual aid would be helpful. To better understand padding and margin, you should understand the concept of the CSS Box Model. All of these attributes affect the overal size of the actual space taken up by the element.

0347008eca745add0a0862af7f97ec1b

Source: CSS Box Model

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.