How to remove white space above header in WooCommerce email notifications - css

Question

I try to remove white space above the header in WooCommerce email notifications.
I already pasted the email files into the folders:
public_html -> wp-content -> themes -> flatsome-child -> woocommerce -> emails
I already tryed to hide the header with:
/*do_action( 'woocommerce_email_header', $email_heading, $email );*/
But this is not solution because, yes it removes the white space above the header but also hides de header and I don't want this.
I just want to remove the empty space above the header (look the image attached)

Answer 1

The white space is applied via CSS. If you want to apply your own styles or want to modify the existing one in WooCommerce email notifications:
1) You can overwrite the template file:
The template file can be overridden by copying it to yourtheme/woocommerce/emails/email-styles.php.
Replace line 50 - 56 #version 4.0.0
#wrapper {
background-color: <?php echo esc_attr( $bg ); ?>;
margin: 0;
padding: 70px 0;
-webkit-text-size-adjust: none !important;
width: 100%;
}
With
#wrapper {
background-color: <?php echo esc_attr( $bg ); ?>;
margin: 0;
padding: 70px 0;
padding-top: 0;
-webkit-text-size-adjust: none !important;
width: 100%;
}
Also see: Template structure & Overriding templates via a theme - How to Edit files
OR
2) Use the woocommerce_email_styles filter hook:
// Add CSS to email
function filter_woocommerce_email_styles( $css, $email ) {
$extra_css = '#wrapper { padding-top: 0 }';
return $css . $extra_css;
}
add_filter( 'woocommerce_email_styles', 'filter_woocommerce_email_styles', 10, 2 );
Code goes in functions.php file of the active child theme (or active theme).
Optional: via $email->id == ... you can target specific emails, see How to target other WooCommerce email notifications