CODEWITHSUNDEEP
csspseudo-element
dcn
dcn

Reputation: 4469

Prevent padding of wrapped pseudo element with empty content

When adding a background image in a standard block display div via pseudo classes like this:

.outer {
    background-color: red;
    text-align: center;
}
.outer:before {
    background-color: blue;
    display: inline-block;
    width: 200px;
    height: 200px;
    content: " ";
}

the outer div ends up being padded by a few px at the bottom relative to the contained :before element. Is it possible to avoid this? The padding goes away if the content is replaced by non-empty text, but then I'd need a way of making the text invisible.

http://jsfiddle.net/7Ja5d/

Upvotes: 1

Views: 113

Answers (3)

Emmanuel
Emmanuel

Reputation: 51

Add height to .outer and set pesudo height to 100% http://jsfiddle.net/7Ja5d/8/

    .outer {
      background-color: red;
      text-align: center;
      height: 200px;
    }

    .outer:before {
      background-color: blue;
      display: inline-block;
      width: 200px;
      height: 100%;
      content: " ";
    }

Also if you want to make text invisible just set "color: transparent;"

Upvotes: 0

tbailey000
tbailey000

Reputation: 141

Because your inner element is an inline-block it is observing the line height style, so just set:

.outer{ line-height: 0; }

http://jsfiddle.net/7Ja5d/5/

Hope that helps

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105903

You have 2 ways to get rid of that space. (your generated box stand on baseline, like text. it leaves room for letters like : g,j,p,q,y).

  1. set vertical-align:top or bottom to your inline-box http://jsfiddle.net/7Ja5d/2/
  2. set your boxe as a block http://jsfiddle.net/7Ja5d/1/

Upvotes: 3

Related Questions