<P> espaciamiento problema en JS / CSS aleta de texto

Coolcrab:

Estoy tratando de hacer una herramienta de ambigrama haciendo que muestra el texto en mayúsculas y alguna otra fuente tanto de lado derecho hacia arriba y hasta abajo lateral. Me las arreglé para hacer esto, pero el espacio entre las palabras es muy grande. ¿Hay alguna manera de conseguir que sea cercano a cero? He intentado añadir algunos márgenes de la CSS, pero parece ignorarlo.

Está hecho como un plugin para WordPress. Se puede ver corriendo aquí: https://makeambigrams.com/demo/

<?php
add_shortcode( 'worder', 'worder_print_html' );
function worder_print_html( ) {
    wp_enqueue_script('worder-script');
    ob_start();
    ?>
    <div class="the_worder_contaienr">
        <form method="post" id="word-er-form" name="word-er-form">
            <input type="text" name="word_er_word" id="word_er_word" value="" /> <br>
            <input type="submit" value="Generate" />
        </form>
        <div id="the_result">
        </div>
    </div>
    <style>
        .the_worder_contaienr {
            text-align: center;
            margin:0
            margin-top: -20px;
        }
        .the_worder_contaienr input{
            margin:0
        }
        p.origgina_other_font, .upside_down_font p {
            font-family: serif;
            margin:0
            margin-top: -20px;
        }
        .upside_down_uppwe,.upside_down,.upside_down_font  {
            transform: scaleY(-1);
            margin:0
            margin-top: -20px;
        }
    </style>
    <?php
    //$output = ob_end_clean();
    return ob_get_clean();
    //return "foo = {$atts['foo']}";
}
function the_worder_jquery() {
    wp_register_script( 'worder-script', plugin_dir_url( __FILE__ ) . '/custom.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'the_worder_jquery' );

js

(function($) {

  $('#word-er-form').on('submit', function() {
    event.preventDefault();
    var the_input = $('#word_er_word').val().toLowerCase();
    var the_characters = the_input.split('');
    console.table(the_characters);
    var the_original = $('#word_er_word').val();
    var the_upper_case = the_input.toUpperCase();
    var the_revese_case = the_characters.reverse().toString().replace(/,/g, "");;
    console.log(the_original);
    console.log(the_upper_case);
    console.log(the_revese_case);
    var the_result = '<p class="original">'+the_input+'</p>';
    the_result += '<p class="original_capitalize">'+the_upper_case+'</p>';
      the_result += '<p class="origgina_other_font">'+the_input+'</p>';
      the_result += '<div class="upside_down_font"><p>'+the_revese_case+'</p></div>';
            the_result += '<div class="upside_down_uppwe"><p>'+the_revese_case.toUpperCase()+'</p></div>';
      the_result += '<div class="upside_down"><p>'+the_revese_case+'</p></div>';
      $('#the_result').html(the_result);
  })

})( jQuery );

Kunal Raut:

Sí es posible, para ello se debe disminuir todos los estilos de <p>etiqueta como se indica a continuación

p {
padding : 0px;
margin-top : 0px;
margin-bottom :0px;
height : 15px;

}

Nota: Recuerde que la altura predeterminada de la <p>etiqueta se establece en 28pxlo que debe disminuir la altura, así o si no simplemente por los otros estilos que puede mostrar algunas space.And si style = "margin : ... "se menciona eliminarlo.

Espero que esto podría ayudarle.