Javascript <；p>；JS/CSS文本翻转器中的间距问题

我正在尝试制作一个双面文字制作工具，它可以用大写字母和其他字体显示文字，包括右上角和上下角。我设法做到了，但是单词之间的间距很大。有没有办法让它接近零度？我尝试在css中添加一些边距，但它似乎忽略了这一点

它是作为wordpress插件制作的。您可以在此处看到它正在运行：

.这个词{
文本对齐：居中；
保证金：0
利润上限：-20px；
}
.worder\u container输入{
保证金：0
}
p、 原版其他字体、.上下颠倒字体p{
字体系列：衬线；
保证金：0
利润上限：-20px；
}
.上下颠倒，上下颠倒，.上下颠倒，.上下颠倒字体{
变换：scaleY（-1）；
保证金：0
利润上限：-20px；
}
是的，这是可能的，为此您必须减少
标签的所有样式，如下所示

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

}

注意：请记住，
标记的默认高度设置为
28px
，因此您必须同时降低高度，否则仅通过其他样式可能会显示一些空间。如果提到
style=“margin:…”
，请将其删除

希望这能对你有所帮助

(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 );

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

}