Home > CSS > Interesting difference between CSS Padding and Margin tags and innerText and innerHTML function

Interesting difference between CSS Padding and Margin tags and innerText and innerHTML function

Have you ever wondered the difference between CSS Padding and Margin tage?

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:

1) Border = 0, padding = 0, margin = 0

Sample Text

2) Border = 10px, padding = 0, margin = 0

Sample Text

3) Border = 10px, padding = 10px, margin = 0

Sample Text

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.

It will be worth to add another commonly miss understood difference between innerHTML and innerText.

innerHTML returns all of the markup and content within a given element.

innerText returns all of text content within a given element.

Hi There

InnerHTML of H1 would be: Hi There

InnerText of H1 would be: Hi There

Hope this bit code is helpful for you.

Happy styling 🙂

Advertisements
Categories: CSS Tags:
  1. No comments yet.
  1. No trackbacks yet.

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: