Open jsartisan opened 5 months ago
There are two ways to solve this.
gap
margin-inline-end
styles.css
body { font-family: sans-serif; } main { display: flex; flex-direction: column; gap: 12px; padding: 20px; align-items: center; } button { display: flex; align-items: center; appearance: none; background-color: #2ea44f; border: 1px solid rgba(27, 31, 35, 0.15); border-radius: 6px; box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0; box-sizing: border-box; color: #fff; cursor: pointer; font-size: 1rem; font-weight: 600; line-height: 20px; padding: 6px 14px; position: relative; text-align: center; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; white-space: nowrap; } .icon { height: 1.2em; margin-inline-end: 0.5em; }
There are two ways to solve this.
gap
property on the parentmargin-inline-end
propertystyles.css