The difference between Margin and Padding properties

Margin and Padding are two similar layout concepts that are often confused. Margin represents the amount of space around the outside of the element. This space ensures that the Element has room between it and neighboring elements. Padding functions differently. It is present on elements that inherit from Control  and allows the control to specify an amount of space inside itself. This inner space separates the control from its own content.  Take for example the Button control. The space inside the Button, around its text, that prevents the Button‘s border from shrinking to the size of its contents. Take a look at the below diagram which illustartes the differenece more.

marginandpadding

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: