CODEWITHSUNDEEP
htmlcss
havingagoatit
havingagoatit

Reputation: 583

simple css box behind text not wrapping

so i have got a box , with some text in it and i want to highlight the text as shown in the jsfiddle.... unfortuntely I can't seem to change the green box so it has the same padding as the text... can someone help a stupid boy ?

the jsfiddle is here ...

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

and here is the css involved (not much really)

.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;

}

Upvotes: 0

Views: 41

Answers (1)

lmgonzalves
lmgonzalves

Reputation: 6588

You need to set margin instead padding for the .border element:

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

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

Upvotes: 1

Related Questions