While both CSS properties do offer the ability to add space within a CSS layout there is a definitive separation between the two. To better understand we can use the CSS Box Model and determine the main difference.
As you can see in the above diagram the center is where your element, such as your text, would reside. The space directly around your text element is your CSS padding, followed by the border and then your margin. Therefore, padding defines the spacing between your element and the boarder, while the margin defines the spacing between your border and any other outer elements in your CSS layout.
Here is an example that should help further clarify:
As you can see the margin defines the space outside your border and between other elements, while the padding defines the space between your element and the elements border. Hopefully by understanding the difference you can more effectively utilize your CSS margin and CSS padding properties.
As you can see in the above diagram the center is where your element, such as your text, would reside. The space directly around your text element is your CSS padding, followed by the border and then your margin. Therefore, padding defines the spacing between your element and the boarder, while the margin defines the spacing between your border and any other outer elements in your CSS layout.
Here is an example that should help further clarify:
As you can see the margin defines the space outside your border and between other elements, while the padding defines the space between your element and the elements border. Hopefully by understanding the difference you can more effectively utilize your CSS margin and CSS padding properties.
No comments:
Post a Comment