HTML/CSS自定义按钮文本对齐异常问题排查求助

开发前端页面时按钮组件出现文本对齐异常，多次调整未修复，需要排查代码编写错误。

效果参考 #

• 异常效果：
• 目标效果（红色标注为文本预期位置）：

完整项目代码 #

CSS部分 #

body {
        background-color: #d12502;
        margin: 0px;
      }

      html, body {
        max-width: 100%;
    }

      .button {
        display: block;
        outline: none;
        cursor: pointer;
        text-decoration: none;
        font: 14px "Arial";
        overflow:hidden ;
        border-radius: 6px;
        padding: .4em 1em .5em 1em;
        margin: 10px ;
        background: #d12502;
        background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
        border-top: 1px solid #4081af;
        border-right: 1px solid #2e69a3;
        border-bottom: 1px solid #20559a;
        border-left: 1px solid #2e69a3;
        -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
        -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
        box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
        color: #fff;
        -webkit-background-clip: padding-box;
      }

.arrow {
  border: solid #d12502;
  border-width: 0 2px 2px 0px;
  display: inline-block;
  padding:3px;
  float: right;
  margin:-22px -260px ; 
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.button {
    padding: .35em 20em 10vw 42vw;
    margin: -10px 3vw;
    text-align: left;
    height: 15px;
    width: 50vw;
    background: #ffffff;
    background: -moz-linear-gradient(0% 100% 90deg, #fcfdff, #ffffff);
    border: none;  
    color: rgba(0, 0, 0, 0.808);
    -webkit-background-clip: padding-box;
}
 
.button:hover {
    background: #d12502;
    background: -moz-linear-gradient(0% 100% 90deg, #d12502, #d12502);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d12502), to(#d12502));
    border: none;
    -moz-box-shadow: inset 0 1px 0 0 #d12502;
    -webkit-box-shadow: inset 0 1px 0 0 #d12502;
    cursor: pointer;
    -webkit-background-clip: padding-box;
}

HTML部分 #

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
    </head>
    <style>
      #navbar {
          width: 125vw;
          height: 40px;
          margin: 0px;
          background-color: rgb(255, 255, 255);
      }
      #navbar img {
          display: block;
          width: 200px;
          height: 40px;
          margin: auto;
      }
     p {
        margin: 10px 10px 10px -110px;
        white-space: normal;
     }
      img {
        width: 100%;
        height: auto;
      }
      div {
        width: 25px;
        height: 2px;
        background-color: black;
        margin: -7vw 108vw 8.3vw;
      }
  </style>
<body>
  <nav id="navbar">
    <img src="logo.png" alt="Logo image">
    <div></div>
    <div></div>
    <div></div>
</nav>
<br>
<br>
<img src=".png" class=""><button class="button"><p>THIS IS BUTTON NUMBER ONE </p><i class="arrow right"></i></button>
<br>
<img src=".png" class=""><button class="button"><p>Success</p><i class="arrow right"></i></button>
<br>
<img src=".png" class=""><button class="button"><p>Success</p><i class="arrow right"></i></button>
<br>
<img src=".png" class=""><button class="button"><p>Success</p><i class="arrow right"></i></button>
<img src=" .jpeg" class="">
<br>
<br>
<img src=".png" class=""><button class="button"><p>Success</p><i class="arrow right"></i></button>
<br>
<img src=".png" class=""><button class="button"><p>Success</p><i class="arrow right"></i></button>
<br>
<img src=".png" class=""><button class="button"><p>Success</p><i class="arrow right"></i></button>
    </body>
</html>

现存代码错误 #

• 重复声明.button选择器，后写的样式覆盖原有按钮样式：其中padding: .35em 20em 10vw 42vw设置了42vw的超大左内边距，直接将文本挤到异常位置；10vw的下内边距、固定15px的高度远小于内容实际占位，导致内容溢出错位。
• 全局p标签设置了margin: 10px 10px 10px -110px，负左外边距将按钮内的文本强行向左偏移，加剧对齐错乱。
• 箭头图标.arrow使用硬编码负外边距margin:-22px -260px定位，属于写死的偏移值，不同视口宽度下位置完全失控，无法适配。
• 全局布局存在大量不合理的视口单位设置：导航栏宽度设为125vw超出页面宽度，汉堡菜单元素用-7vw 108vw 8.3vw的边距硬偏移，整体页面布局错乱连带按钮位置异常。
• 结构布局不合理：列表项配图和按钮直接相邻未做容器包裹，多个块级、行内替换元素挤在同一行，干扰按钮自身的布局计算。

内容的提问来源于stack exchange，提问作者Caelan