the only style here is the width, height and position of the parent container (wrapper) <div>
and an inline style of border 1px solid and a color

  1. padding or margin: Xpx : affects all four (4) sides. Left, Top, Right, Bottom
  2. padding or margin: Xpx Xpx : affects Top/Bottom then Left/Right in sets
  3. margin 'long hand':
    1. margin-left: Xpx;
    2. margin-top: Xpx;
    3. margin-right: Xpx;
    4. margin-bottom: Xpx;
  4. you can set L px R px and T/B px - or - L/R px T px B px in a sets of three as well.

*note.. the order is a messed up thing. dealing with standards, coders and 'office burocracy'.
each person or group believes they are smarter than you (me), but in being 'so smart' they are Really dumb, in everything but their area of 'expertise'
Anyways. Some 'standards' have attributes affecting elements (selectors, see here is an example, elements, selectors, blah, blah they don't even agree on the lable)
border for example is affected in order Left, Top, Right Bottom. margin is ? Top, Bottom, Left, Right there are more, but if i start bitching, that's what this page will turn into and not an experiment.

This is <H1> 'heading' text

This is <H2> 'heading' text

This is a paragraph (<p>) with 1 pixel border, solid in purple

This is a paragraph with padding:4px lrtb

This is a paragraph with padding: 10px 24px ((T/B)px (L/R)px)

This is a paragraph with margin top and margin bottom set to 10px seperatly

This paragraph is set to margin T/B 100px and L/R 5px, just for fun aggsageration

This is an unstyled paragraph following the 100px so we can see if the margin is, as thought 100px top and bottom

You can use 'margin-left:4px' to 'pad' your whole paragraph 'box' or 'padding-left:4px;' to leave 'box' justified left and move the content (text paragraph)
in from it's parent element (div) unlike 'text-indent:4px' (p above) which only 'pads' the First word / line of a paragraph

This paragrap is the same as above, but uses 'padding-left:4px' instead of 'margin-left:4px'
see how above the 'box' is moved in from left 4 pixels, yet the text is still tight to left border of paragraph 'box'
and here, the 'box' remains 'justified' left and the content (paragraph text) is moved right 4 pixels.

And, here is the same paragraph with a combination of 3 'padding' or alignment styles
the literal style code: <p style="border:1px solid red; margin-left:4px; padding-left:4px; text-indent:6px; ">

Just to point out: the 4 paragraph 'boxes' and this one show the 'default margin height between(top / bottom divided by 2)

This is a paragraph 'box' with style (selector/element P and values/attributes/declarations) as follows:
<p style="border:1px dotted black; padding:4px; margin: 4px; ">