html - 文本后面的简单 css 框不换行

Question

所以我有一个盒子，里面有一些文本，我想突出显示 jsfiddle 中显示的文本....不幸的是，我似乎无法更改绿色框，因此它具有与文本...有人可以帮助一个愚蠢的男孩吗？

jsfiddle 在这里...

http://jsfiddle.net/2es4bx0o/3/

这是涉及的 css(实际上并不多)

.border {


  background-color:#8cc63f;
}

.tile-area-main {
  position: fixed;
  left: 0px;
  top: 0px;
  display: inline-block;
  color: #ffffff;
  width: 780px;
  height: 450px;
  overflow: hidden;
  z-index : 3000;
  background-color:rgba(37, 34, 104, 0.3);
  border-radius: 25px;

}
.tile-area-main p {
    margin: 0;
    padding: 0 2.4em 0.6em;
    font-size: 1.4em;
    line-height: 1.5;
    color : #000;
    cursor: pointer;

}

Answer 1

您需要为 .border 元素设置 margin 而不是 padding:

.border {
    margin: 0 2.4em 0.6em !important;
    padding: 0 !important;
}

fiddle :https://jsfiddle.net/lmgonzalves/2es4bx0o/4/