-3

I sometimes use the sytle padding script

like this

<style>
#img1{padding:7px 10px}
</style>
<body>
<img src="myjpg.jpg" id="img1"/>
</body>

I can't understand exactely what the role of padding.

maybe padding's function is object's out layer margin??

House
  • 1
  • 4
  • This image might help.. http://i.stack.imgur.com/PeSIJ.gif ... so will this question that has already been asked on here. http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css – Josh Crozier Sep 04 '13 at 02:56
  • please refer to https://www.google.com/#q=CSS+padding for your answer. – Mike 'Pomax' Kamermans Sep 04 '13 at 02:56

2 Answers2

3

As you can see in the image (shared by Josh) :

padding

Say you have an element c with parent p.

  • Padding : When applied to p, adds space inside p, but outside c.
  • Padding : When applied to c, adds space inside c.
  • Margin : When applied to c, adds space outside c, but inside p.
  • Margin : When applied to p, adds space outside p, but inside p's parent.

You may notice that 1st & 3rd case look alike when only p & c are considered.

loxxy
  • 12,505
  • 2
  • 21
  • 52
0

Padding is the distance from the outer border of an element to the inner part which contains the children.

+------------+
|  (Padding) |
|  +------+  |<--- Outer Border
|  |(con- |  |
|  | tent)|  |

Note however, that in browsers like Firefox and Chrome by default the padding gets added to the width of the element.

ced-b
  • 3,779
  • 1
  • 24
  • 35