Why and how is twentythirteen adding a margin-top to my footer?

Look in the parent theme’s functions.js. It looks like an implementation of the “sticky footer” concept. The margin is being set via script:

var body    = $( 'body' ),
    _window = $( window );

/**
 * Adds a top margin to the footer if the sidebar widget area is higher
 * than the rest of the page, to help the footer always visually clear
 * the sidebar.
 */
$( function() {
    if ( body.is( '.sidebar' ) ) {
        var sidebar   = $( '#secondary .widget-area' ),
            secondary = ( 0 == sidebar.length ) ? -40 : sidebar.height(),
            margin    = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary;

        if ( margin > 0 && _window.innerWidth() > 999 )
            $( '#colophon' ).css( 'margin-top', margin + 'px' );
    }
} );