Есть две кнопки. В одной одинокий эмоджи, в другой обычный текст:
<div style="position: fixed; right: 0; top: 0">
<button class="top-button">
🌎
</button>
<button class="top-button">
Text
</button>
</div>
Они отформатированны с помощью CSS:
.top-button {
display: inline-block;
cursor: pointer;
padding: 0.25rem;
min-width: 2rem;
min-height: 2rem;
background-color: rgba(180, 180, 180, 50%);
border: none;
box-shadow: 2px 2px 2px darkgray;
border-radius: 5px;
margin: 0.1rem;
}
Живой пример: https://playcode.io/1629892
Скриншот: https://i.stack.imgur.com/hCmfL.png
Возникает две проблемы:
1) Кнопка без эмоджи в моём браузере отображается на пару пикселей НИЖЕ, чем кнопка с эмоджи. Очевидно, я хочу, чтобы кнопки были выровнены по горизонтали.
2) Кнопка без эмоджи, располагаясь ближе к правому краю окна, почему-то прижимается вплотную к нему, хотя у неё задан не-нулевой margin. Хочется, чтобы она так не делала.
