Wie fügt man Leerzeichen zwischen Menüelementen hinzu (in Wordpress)?

Question

Ich arbeite in WordPress und ich habe dieses Menü mit 4 Menüpunkten. Das Problem ist, dass sie sich berühren und es gibt 0 Raum zwischen denen es meiner Meinung nach hässlich macht.

Jetzt tritt dieses Problem nur in WordPress auf. Also muss ich eine Lösung finden, wie ich etwas Abstand dazwischen legen kann.

Vielleicht kennen Sie eine Lösung, ohne etwas auf WP installieren zu müssen.

(die Codes im Körper ist genau wie in meinem Wordpress zu zeigen, wie es aussieht. Sie können es geben, und das wird etwas Platz zwischen, setzen aber leider das nicht in Wordpress arbeiten.)

<style> 
    .smallmenu { 
    margin: 0 auto; 
    max-width: 436px; 
    width: 100%; 
    } 

    .Capital { 
    margin: 0px 0 -5px 0; 
    line-height: 63px; 
    font-size: 60px; 
    font-weight: ligter; 
    } 

    .smalltext { 
    text-align: center; 
    margin-top: 0px !important; 
    font-weight: 100px; 
    font-size: 14px; 
    } 

    .smalltextpub { 
    text-align: center; 
    margin-top: 0px !important; 
    font-weight: 100px; 
    font-size: 14px; 
    margin-left: -5px; 
    } 

    .cornermenu { 
    display: inline-block; 
    margin: auto; 
    border-radius: 25px; 
    background: #769DBD; 
    padding: 20px; 
    width: 100px; 
    height: 100px; 
    text-align: center; 
    color: #fff; 
    font-family: Arial; 
    padding-top: 10px; 
    text-decoration: none; 
    } 

    #hoverr:hover { 
    border-radius: 25px; 
    background: #464646; 
    padding: 20px; 
    width: 100px; 
    height: 100px; 
    text-align: center; 
    color: #fff; 
    font-family: Arial; 
    padding-top: 10px; 
    text-decoration: none; 
    } 

    * { 
    box-sizing: border-box; 
    } 
</style> 
<div class="smallmenu"><a id="hoverr" class="cornermenu" href="#methods"><span class="Capital">M</span> 
<span class="smalltext">Methods</span></a><a id="hoverr" class="cornermenu" href="#background"><span class="Capital">B</span> 
<span class="smalltextpub">Background</span></a><a id="hoverr" class="cornermenu" href="#results"><span class="Capital">R</span> 
<span class="smalltext">Results</span></a><a id="hoverr" class="cornermenu" href="#publications"><span class="Capital">P</span> 
<span class="smalltextpub">Publications</span></a></div> 

Answer 1

Setzen Sie einfach einen festen Rand auf .cornermenu. So etwas wie margin: 2px

JSFiddle link

.cornermenu { 
    ... 
    margin: 2px; 
    ... 
    }