Trying to understand the math in white space

Skip to the end for the TL;DR.

I'm really trying to learn web design but the thing I am stuck on right now is white space and what the proper math is for it.

Using this image below I can see that there is 40px of padding on the left and right side of the mobile device. From the checkbox and the icon I am estimating its 56px which would be 40 + 16 (0.40 of 40) But how can I tell the size of the icons? How does this white space make sense? What's the math behind this? Is there a rule of thumb?

Somebody suggested I draw a grid over the image to understand the white space but even that is confusing as hell for me.

http://ift.tt/22jTliU

TL;DR: Using the image linked I'm trying to understand the math of the whitespace in said image.