CSS填充/边距未按预期工作

我想要一个类似于此的按钮：

但这是我的：

以下是CSS：

.cubutton {
border-radius: 99999px; /* Round button corners here with border-radius */
    background-color: #44ace8;
color: #fff;
cursor: pointer;
    font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-size: 2.0rem; 
font-weight: 700;
letter-spacing: 1px;
padding: 20px 40px 20px 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); /* Adds drop shadow to button. */
-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.75);
    -webkit-transition: all 0.1s ease-in-out;
-moz-transition:    all 0.1s ease-in-out;
-ms-transition:     all 0.1s ease-in-out;
-o-transition:      all 0.1s ease-in-out;
transition:         all 0.1s ease-in-out; 
}

就我的一生而言，我无法理解为什么填充和边距不显示。无论如何，我都不是编码专家，所以我很容易忽略一些显而易见的东西

以下是html：

<a data-sumome-listbuilder-id="11553d26-bca5-4975-91e8-e5fdf2937bf8"
 class="cubutton" data-sumome-trigger="true" 
 href="javascript:void(0);">Take this post with you. Get the PDF version. 100% free. Click here.</a>

---

您的代码实际上可以工作。您只需调整div的背景色和高度：

---

您需要设置元素的宽度（假定它是块级元素），否则它将始终跨越其父元素的宽度。为了避免让填充调整总宽度，您需要显式设置

---

编辑：更新了Fiddle和CSS以匹配更新的问题（使用

标记）。

要解决问题，我需要你的html，因为问题就在那里

您无法获得相同的外观，因为您使用锚定作为按钮，它不允许您进行换行或更改宽度。因此，简而言之，要将锚定用作按钮，您必须输入大量文本

使它工作，但只有两个字

下面是一个示例，我只需将标记更改为：

<button data-sumome-listbuilder-id="11553d26-bca5-4975-91e8-e5fdf2937bf8" class="cubutton" data-sumome-trigger="true" href="javascript:void(0);">
Take this post with you. <br/> Get the PDF version.<br/> 100% free. Click here.</button>

带上这个帖子
获取PDF版本。
100%免费。点击这里。

它看起来正是你想要的

---

编辑： 正如will指出的，如果在其中添加“display:block”，实际上可以将其作为锚定。在这种情况下，您还需要给它一个宽度，并使文本在中心对齐

---

如果字体大小为20px，则这些填充看起来分别为20和40px。试着增加它？或者你想让按钮更窄些？什么是HTML？根据新的HTML更新了我的答案。@我还不能评论其他人的帖子，但我用HTML编辑了他们的问题。但在它被偷看之前，你可以在这把小提琴里找到它。这是最重要的。把它放在你的小提琴里并没有解决问题，它真的是个标签。谢谢大家。一开始我对所有的建议都有点困惑。但是现在，我让它工作起来了，看起来棒极了！很高兴听到这个消息。不要忘了接受任何一个答案作为“已接受的答案”。

.cubutton {
  display: block;
  box-sizing: border-box;
  padding: 60px 100px;
  text-align: center;
  text-decoration: none;
  width: 50%;
}

<button data-sumome-listbuilder-id="11553d26-bca5-4975-91e8-e5fdf2937bf8" class="cubutton" data-sumome-trigger="true" href="javascript:void(0);">
Take this post with you. <br/> Get the PDF version.<br/> 100% free. Click here.</button>