A tiny tip right this moment, however a great one: use the :empty pseudo-class to cover pesky empty parts (generally present in user-generated content material).
p:empty {
show: none;
}This may conceal paragraph parts which have no kids, or comprise no textual content nodes. Textual content nodes embrace whitespace, so a paragraph containing a whitespace character received’t be hidden on this case. Alternatively, if a content material editor has pressed Enter a bunch of occasions, this’ll do an incredible job of hiding these additional generated paragraphs.
:empty can be fairly useful for debugging. We are able to add a crimson define to any empty aspect and see what is perhaps inflicting us structure points:
:empty {
define: 1px stable crimson:
}Grid structure are one place this may be helpful. Typically it’s onerous to grasp why a component is positioned on a specific grid column or row. It’s price remembering that it might be all the way down to empty parts!
See the Pen
Grid with empty cells by Michelle Barker (@michellebarker)
on CodePen.
Bear in mind, parts that solely have content material decided by the CSS content material property will nonetheless be thought-about empty. It’s not good follow to make use of CSS for many content material anyway — at all times put necessary content material in your HTML.
