I agree that white space is important. But why have so much of it on the OUTER edges of the page, rather than in the inner margins. When you read a book the paper on the inner margins is typically curved, and thus the "effective white space" you see there is less than you could conclude from these flat illustrations.

I can see one reason which could have historic reasons. When you flip the pages with your hands, they will wear out more on the outer horizontal margins. If you make that margin wider there is less chance of corrupting the printed content. However that would not apply to online pages.

Also I don't understand why there should be more white space at the bottom than the top? Is it because people like to write notes on the page after they have read it, so writing them at the bottom of the page would seem more natural?

My guess is that it's because people are much more likely to hold a book by the bottom than by the top. Either because you want to avoid wear (as mentioned above) or because you don't want your reader's hand to be obscuring the text.

(Both of which also explain why the outer margins are larger than the inner margins.)

For footnotes, to make space for the hands, because we slightly perceive vertically centered text as below center, because culturally we expect documents to start at the top of a page, and to reduce the degree the head or eyes must turn to look at the text.

Footnotes.