How to not display css padding when span element is empty


Tags: html,css

Problem :

I've been trying to solve the following problem.

If you run this code you will notice blue and red elements. How can I hide the 'red element' when there is no text to display (span is empty). And I would like to do the same thing with 'blue element' when there is no text inside it shouldn't be visible. The reason why is displayed is padding, but I would like to have padding because it looks nice. I am sure you guys are best of the best and find solution. Regards!

.myClassDer {
  font-size: 34px;
  color:white;
  background: blue;
  color: white;
  border-radius: 25px;
  padding: 7px;
  width: auto;
  height: auto; 
}

.myClassDie {
  font-size: 34px;
  color:black;
  background: red;
  color: white;
  border-radius: 25px;
  padding: 7px;
  width: auto;
  height: auto; 
}
<span class="myClassDer">here</span>
<span class="myClassDie"></span>



Solution :

If you don't require support for IE8, you can use pseudo-state :empty (here for more examples ) to reset padding for all instances of .myClassDie without content, using the following code.

.myClassDie:empty
{
   padding:0;
}

Updating your working example, it becomes:

.myClassDer
{
  font-size: 34px;
  color:white;
  background: blue;
  color: white;
  border-radius: 25px;
  padding: 7px;
  width: auto;
  height: auto; 
}

.myClassDie
{
  font-size: 34px;
  color:black;
  background: red;
  color: white;
  border-radius: 25px;
  padding: 7px;
  width: auto;
  height: auto; 
}

.myClassDie:empty
{
   padding:0;
}

<span class="myClassDer">here</span>
<span class="myClassDie"></span>
<span class="myClassDie">ClassDie but with content</span>

In which I inserted two <span class="myClassDie"> to show you behaviour with and without content.

Due to effective invisibility of "empty" case, if you want a more compact solution, you can also set simply (collapsing my separate rules into one):

.myClassDie:not(:empty)
{
   font-size: 34px;
   color:black;
   background: red;
   color: white;
   border-radius: 25px;
   padding: 7px;
   width: auto;
   height: auto; 
}

In this case, only if .myClassDie is not empty, you apply all properties.

This is equivalent for this specific case, but if you want to see this DIV also if empty, limiting only to reset padding (for example because it has fixed size or borders), you must use first solution, not the more compact one.


    CSS Howto..

    How to customize in javascript?

    Entire window becomes blur after a modal is shown jQuery why?

    How can you assign a class to an id in css or javascript?

    How to refere a stylesheet in phonegap?

    How to have the nav and footer more than 1000px?

    Tag image in svg invisible in FireFox because of using style. How to fix?

    How to stack a div absolutely on top of table cells

    How to have dots as horizontal separator with inline text like in this screenshot?

    How to resize content area with CSS dynamically and no javascript

    How do I give a JavaFX TextField a Swing-style lowered bevel border?

    How to align 2 divs inside one div container with CSS (see image)

    CSS Image size, how to fill, not stretch?

    How to make the height REALLY 100%

    Django - how to collapse forms like in the django admin

    How i put css on message of Hibernate validator anotation message of spring project

    htmlAttributes: How do I add a CSS class rule for the below?

    How to find the screen width and apply it to a particular css

    How to reverse direction of moving div once it reaches side of screen?

    How to extract the text between two spans with lxml (or BeautifulSoup)?

    Only partial image showing as my background image. How can I use CSS to get the full image as my background?

    How to select any item preceded by some word in CSS

    How to cancel out .table width:100% in bootstrap css

    How to properly add divs inside another div so the original design doesn't break?

    How to prevent CSS declaration dropped errors cross browser?

    How to link index.html to css file for github page

    How a css selector is applied when reffering to multiple classes, ids, or elements?

    How do I set the height of an iframe with the min-height property in the body?

    Web page not responsive: how to use position absolute and relative?

    Symfony2 Form Type - how to set form CSS class as attribute?

    How to make the content of a span wrap onto the next line in an embedded