Margins and Paddings / Box Model

emilyTK kindly hint me to that information:

http://www.w3.org/TR/CSS2/box.html

I have read it all. I understood a lot of details; but the basic concept of the box model and the differentiation between margins and paddings is still very unclear to me.

I would like to know (to understand):

• When seeing a given Webpage (WordPress-blog): How can I recognise, which content forms a content box for it’s own? And how can I recognise, what is the “name” of that content box? Or in other words: How can I recognise, what is the “name” of the object, whose properties I want to change?
• Why (For what purpose) is it useful to say, that a content box has not only a margin, but a padding as well? What are – within our context – proper translations for both terms into German?
• Has a border in deed an edge? Or is the border the edge of an certain area?

Regarding:

UL {
        background: yellow;
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* No borders set */
      }

and

http://www.w3.org/TR/CSS2/images/boxdimeg.png

• Where – within the picture – can I “see” that 12px-margin and the 3px-padding? How the picture would look with a – let’s say – 0px-margin and a 3px-padding on the one hand; and with a 12px-margin and 0px-padding on the other hand? And what would be with margin and padding, both of 6px?

Regarding the same picture and:

LI {
        color: white;                /* text color is white */
        background: blue;            /* Content, padding will be blue */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                     /* No borders set */
      }

• I’m sure, that I’m able to identify the ’12px 0px 12px 12px’-padding within the picture. I guess, I’m also able to identify the 12px-margin. But I do not understand: For which purpose it is useful to say, that not only the LI-element has a margin, but the UL-element has margin and padding as well? -How the picture would look, using a 0px-margin and/or 0px-padding for the UL-element and a 24px-margin for the LI-element?
  And what would be the other way around: A 0px-margin for the LI-element and a 24px-margin or 15px-padding for the UL-element?

The current partical background of the theoretical questions is that:

https://wordpress.org/support/topic/making-a-better-usage-of-my-blog-space

I would like to change the ‘margins’ (???) or the ‘paddings’ (???) or both (???) of the two columns of my blog.