Solutions for when CSS doesn’t display the way you want it to

When designing a web page using CSS, there are times when it does not display the way you want it to. For example, there may be gaps between elements, the height may not be as expected, or styles may not be applied. There are many causes of these problems, but one of the most important is the setting of the display attribute.

What is the display attribute?

The display attribute is a CSS property that specifies how an HTML element is displayed. This allows you to control the layout and behavior of the element. display settings are often the reason why styles are not applied, and if an element does not display as expected, it is important to check this attribute first.

Common Problems and Solutions

1. Gaps between elements

Problem: Sometimes there are unexpected gaps between elements. For example, when display: inline-block; is used, gaps often occur.

Solution: To eliminate the gaps between elements, set the font size of the parent element to 0 or use Flexbox to position it.

.parent {
  font-size: 0; /* eliminate gaps between child elements */
}
.child {
  display: inline-block;
  font-size: 16px; /* set font-size of child elements as needed */ }
}

2. Height is not aligned

Problem: When using Flexbox, the height of child elements may not be aligned.

Solution: set align-items: stretch; to the parent element or specify a specific height. Alternatively, use grid instead of Flexbox for height alignment.

.parent {
  display: flex; /* align-items: stretch; /* align-items: stretch
  align-items: stretch; /* align height */
}
.child {
  flex: 1; }
}

3. Styles not applied

Problem: width and height do not work for inline elements ( span anda).

Solution: Set display: inline-block; or display: block; on inline elements to enable width and height specifications.

span {
  display: inline-block;
  width: 100px;
  height: 50px; }
}

4. Text is displayed overflowing

Problem: Text is displayed beyond the width of the element.

Solution: use a combination of overflow: hidden;, white-space: nowrap; and text-overflow: ellipsis; to prevent overflow.

.text {
  display: block;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }
}

5. Margins do not work

Problem: Margins may not work as intended. Margins may behave differently, especially when using Flexbox or grid layouts.

Solution: You can check the effect of margins by setting flex and adjusting align-self on the Flexbox child elements.

.parent {
  display: flex;
  justify-content: space-between;
}
.child {
  margin: 10px; }
}

6. Element not centered

PROBLEM: You want to center an element, but it doesn’t work.

Solution: Centering is easiest with Flexbox. Set display: flex;, justify-content: center;, align-items: center; on the parent element.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.child {
  width: 50%; }
}

Conclusion

If CSS is not displaying the way you want it to, it is important to review the display attribute. This will often improve the behavior and layout of the element. In particular, many problems can be solved simply by changing the display attribute of the element, so please check it out.