CODEWITHSUNDEEP
htmlcssjquery-uibutton
Alexander Farber
Alexander Farber

Reputation: 22988

Spreading jQuery buttons vertically in a longer P or DIV

I have prepared a simple jsFiddle demo for my question.

There is an array of jQuery buttons in a center-aligned P-element:

buttons

<P ALIGN="center">
        <BUTTON ID="recallBtn">Recall</BUTTON>
        <BUTTON ID="shuffleBtn">Shiffle</BUTTON>
        <BUTTON ID="swapBtn">Swap</BUTTON>
        <BUTTON ID="skipBtn">Skip</BUTTON>
        <BUTTON ID="resignBtn">Resign</BUTTON>
        <BUTTON ID="pileBtn" DISABLED>Pile</BUTTON>
        <BUTTON ID="playBtn">Play</BUTTON>
</P>

As you can see the buttons are displayed in 2 rows because the paragraph is too long - and the buttons touch each other vertically.

How could I add some vertical padding between the buttons please?

I have tried adding <P ALIGN="center" STYLE="line-height: 200%"> and similar things (line-height 2 or 2em, also tried using DIV) - but there was no visual change at all.

To give my question some context - my HTML5 game is embedded both in a Facebook canvas and in a Wordpress website, and my custom CSS is minimal.

Upvotes: 0

Views: 38

Answers (1)

Punith Jain
Punith Jain

Reputation: 1677

add margin to .ui-button class

working example https://jsfiddle.net/p79dpvww/

Upvotes: 1

Related Questions