Forem: TheDevSpace

Comparing Visibility, Opacity, and Display: hidden in CSS

TheDevSpace — Thu, 24 Apr 2025 14:37:00 +0000

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

Visibility

The visibility property controls whether to show or hide an element. When set to visible, the element will be displayed normally.

Visit Code Demo 🔗

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

When set to hidden, the element will become invisible, but the space it occupies will still be preserved.

<div class="visible">Visible</div>
<div class="hidden">Hidden</div>
<div class="visible">Visible</div>

As for collapse, different elements are treated differently. For table elements such as table rows (<tr>) or columns, the element will become invisible, and the space it occupies will be collapsed.

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr class="collapse">
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
  <tr>
    <td>Data 7</td>
    <td>Data 8</td>
    <td>Data 9</td>
  </tr>
</table>

But for other elements, it behaves the same as hidden.

Opacity

The opacity property accepts a numeric value from 0 to 1, allowing you to control the opacity of an element.

<div></div>

div {
  width: 300px;
  height: 400px;
  background-image: url(. . .);
  background-size: cover;

  opacity: 0.5;
}

Visit Code Demo 🔗

Visibility vs. opacity vs. display: hidden

There are three different properties in CSS that can control the visibility of an element, visibility, opacity, and display. Let's discuss their differences before we wrap up this lesson.

visibility accepts three values, visible, hidden, and collapse.

When set to visible, the element will be displayed normally.
When set to hidden, the element will be hidden, but the space it occupies will be preserved.

As for collapse, when a table row or column is set to collapse, that row or column will be hidden, and the space it occupies will also be removed. When other elements are set to collapse, it behaves just like hidden.

When opacity is set to 0, the element will be hidden, but the space it occupies will be preserved. This is just like setting visibility to hidden.

When opacity is set to 1, the element will be displayed normally, just like setting visibility to visible.

When setting the display property to hidden, it will remove the element from the DOM tree, meaning the element will be hidden, and the space it occupies will also be removed. This is kind of like setting visibility to collapse, but it works for all elements, not just table rows and columns.

Stacking Elements with Z-index in CSS

TheDevSpace — Wed, 23 Apr 2025 14:09:00 +0000

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

z-index is used to control the order of elements when they are stacked on top of each other. The property accepts integer values, the higher the integer, the higher the order. For example,

<div class="item1">z-index: 1</div>
<div class="item2">z-index: 2</div>
<div class="item3">z-index: 3</div>
<div class="item4">z-index: 2</div>
<div class="item5">z-index: 1</div>

<div class="item">Try to change the z-index of this box</div>

div {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: x-large;
  text-align: center;
  padding: 20px;
  border: 1px solid orange;
  background-color: bisque;

  position: absolute;
}

.item {
  top: 0px;
  left: 0px;
  height: 300px;

  border: 1px solid skyblue;
  background-color: lightblue;
}

.item1 {
  top: 0px;
  left: 0px;

  z-index: 1;
}

.item2 {
  top: 50px;
  left: 50px;

  z-index: 2;
}

.item3 {
  top: 100px;
  left: 100px;

  z-index: 3;
}

.item4 {
  top: 150px;
  left: 50px;

  z-index: 2;
}

.item5 {
  top: 200px;
  left: 0px;

  z-index: 1;
}

Visit Code Demo 🔗

By default, the box .item4 should be on top of .item3, but we configured their z-index values, and because .item3 has a higher order, it will be on top of all other elements.

You can also change the z-index of the blue box (.item) to see what happens.

Understanding Justify and Align in CSS

TheDevSpace — Tue, 22 Apr 2025 13:07:00 +0000

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

After defining the layout, the next step is to deal with the alignment of items. There are nine different alignment properties, as shown in the list below:

align-content
align-items
align-self
justify-content
justify-items
justify-self
place-content
place-items
place-self

This is one of the most complex topics in HTML and CSS, as they do different things for different layout systems.

We'll start by discussing how they work inside a grid layout.

Grid layout

When it comes to aligning items in a grid, we have to talk about both row and column alignments. As an example, this is a grid with six items, and the grid container is 300px high:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  height: 300px;
}

Row alignment

Visit Code Demo 🔗

The align-content property is used to specify how the rows are positioned in a multi-row grid or flex container. For a grid layout, the common values include:

start

.container {
  align-content: start;
}

end

.container {
  align-content: end;
}

center

.container {
  align-content: center;
}

space-between

.container {
  align-content: space-between;
}

space-around

.container {
  align-content: space-around;
}

space-evenly

.container {
  align-content: space-evenly;
}

stretch

.container {
  align-content: stretch;
}

Visit Code Demo 🔗

align-items, on the other hand, is used to define how the items are positioned within their respective grid cell. Common values include:

start

.container {
  align-items: start;
}

end

.container {
  align-items: end;
}

center

.container {
  align-items: center;
}

stretch

.container {
  align-items: stretch;
}

baseline

.container {
  align-items: baseline;
}

Visit Code Demo 🔗

Lastly, the align-self property works just like align-items, except it is used on individual grid cells. If the container has the align-items set, it will be overwritten by align-self.

.container {
  align-items: start;
}

#Item {
  align-self: end;
}

Column alignment

Visit Code Demo 🔗

The column alignment, controlled by the justify properties, works in a similar way. First, the justify-content property defines how grid items are distributed horizontally along the main axis. Some common values are:

start

.container {
  justify-content: start;
}

end

.container {
  justify-content: end;
}

center

.container {
  justify-content: center;
}

space-between

.container {
  justify-content: space-between;
}

space-around

.container {
  justify-content: space-around;
}

space-evenly

.container {
  justify-content: space-evenly;
}

Visit Code Demo 🔗

The justify-items controls how grid items are aligned horizontally within their cells. Some common values are:

start

.container {
  justify-items: start;
}

end

.container {
  justify-items: end;
}

center

.container {
  justify-items: center;
}

stretch

.container {
  justify-items: stretch;
}

Visit Code Demo 🔗

Similarly, the justify-self property is used on individual grid items to overwrite the default alignment rule set by justify-items.

.container {
  justify-items: start;
}

.item-sm {
  justify-self: end;
}

Alignment in both directions

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  height: 300px;

  place-content: center;
}

This is the same as:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  height: 300px;

  align-content: center;
  justify-content: center;
}

Visit Code Demo 🔗

Flex layout

The exact same alignment properties can be used for flexbox layouts. However, instead of row and column alignments, the justify properties deal with the alignment in the flexbox's main axis, which depends on the flex-direction property.

If flex-direction is set to row, the main axis is horizontal:

When you change the flex-direction property, the main axis also changes.

Visit Code Demo 🔗

Parallel to the main axis

The justify properties deal with alignments in the direction parallel to the flex main axis. For example, when the flex-direction is set to row:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  height: 400px;

  /* align-content: center; */
  justify-content: center;
}

And when the flex-direction is set to column:

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  height: 400px;

  /* align-content: center; */
  justify-content: center;
}

Note that the justify-items and justify-self properties are ignored in a flex layout.

Also, instead of start and end, there are flex-start and flex-end, designed specifically for a flex layout. In most cases, the keywords start and end would also work for a flex layout, but you might need to use the flex-* keywords for the best browser compatibility.

Perpendicular to the main axis

On the other hand, the align properties deal with the alignment in the direction perpendicular to the main axis. When the flex-direction is set to row:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  height: 400px;

  align-content: center;
}

And when the flex-direction is set to column:

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  height: 400px;

  align-content: center;
}

Unlike the justify properties, the align-items and align-self properties work in a flex layout.

Similarly, the place properties are a set of shorthand properties that allow you to define justification and alignment at the same time.

You may experiment with the above CodePen demo.

🎯 Mastering z-index: Control Element Stacking in CSS

z-index is used to control the order of elements when they are stacked on top of each other. The property accepts integer values, the higher the integer, the higher the order. For example,

<div class="item1">z-index: 1</div>
<div class="item2">z-index: 2</div>
<div class="item3">z-index: 3</div>
<div class="item4">z-index: 2</div>
<div class="item5">z-index: 1</div>

<div class="item">Try to change the z-index of this box</div>

div {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: x-large;
  text-align: center;
  padding: 20px;
  border: 1px solid orange;
  background-color: bisque;

  position: absolute;
}

.item {
  top: 0px;
  left: 0px;
  height: 300px;

  border: 1px solid skyblue;
  background-color: lightblue;
}

.item1 {
  top: 0px;
  left: 0px;

  z-index: 1;
}

.item2 {
  top: 50px;
  left: 50px;

  z-index: 2;
}

.item3 {
  top: 100px;
  left: 100px;

  z-index: 3;
}

.item4 {
  top: 150px;
  left: 50px;

  z-index: 2;
}

.item5 {
  top: 200px;
  left: 0px;

  z-index: 1;
}

Visit Code Demo 🔗

By default, the box .item4 should be on top of .item3, but we configured their z-index values, and because .item3 has a higher order, it will be on top of all other elements.

You can also change the z-index of the blue box (.item) to see what happens.

CSS Flexbox: Layouts Made Easy

TheDevSpace — Mon, 21 Apr 2025 14:05:00 +0000

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

The flexbox is another layout model in CSS that provides an efficient way to design and structure complex layouts, but with a more flexible approach. It is particularly suited for creating one-dimensional layouts, either in a row or a column, as we will see later.

Just like a grid layout, a flexbox layout also consists of a flex container and several flex items. The container should have its display property set to flex, and all of its direct children automatically become flex items.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.container {
  display: flex;
  gap: 10px;
}

Flex direction

With a flex layout, instead of rows and columns, you must define a flex-direction and a flex-wrap. The flex-direction specifies in which direction the container should stack its flex items. The accepted values are:

column

.container {
  flex-direction: column;
}

column-reverse

.container {
  flex-direction: column-reverse;
}

row

.container {
  flex-direction: row;
}

row-reverse

.container {
  flex-direction: row-reverse;
}

Flex wrap

The flex-wrap property determines whether the flex items should wrap, which means automatically change to the following line when there is insufficient space.

wrap

.container {
  flex-wrap: wrap;
}

nowrap

.container {
  flex-wrap: nowrap;
}

wrap-reverse

.container {
  flex-wrap: wrap-reverse;
}

The flex-flow is a shorthand for both flex-direction and flex-wrap properties.

.container {
  flex-flow: column wrap;
}

Mastering CSS Grid Layout: Columns, Rows, Gaps, and More

TheDevSpace — Wed, 09 Apr 2025 14:35:00 +0000

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

For more complex layouts, you can opt to use a grid system.

A grid layout consists of a grid container and several grid items. The grid container must have its display property set to grid or inline-grid. grid creates a block-level container, and inline-grid creates an inline-level container.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.container {
  display: grid;
}

All direct children of this container will automatically become grid items.

Grid columns

Visit Code Demo 🔗

Hint: You can edit this CodePen demo directly.

You can then specify how many columns you wish to create using the grid-template-columns property. The property accepts any number of values. The number of values determines the number of columns, and the value itself determines the size of that column. For example:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
}

.item {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: x-large;
  text-align: center;
  padding: 20px;
  border: 1px solid orange;
  background-color: bisque;
}

In this example, we created two columns, the first one is 100px wide, and the second one is 200px wide. If you want more columns, simply add more values.

.container {
  display: grid;
  grid-template-columns: 100px 200px 50px;
}

If you want all columns to be equal in size, set the value to auto.

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

This will allow the browser to choose an appropriate column size to fill the parent container.

Grid rows

Visit Code Demo 🔗

The grid rows, on the other hand, are created automatically. You can define row sizes using the grid-template-rows property.

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 100px 150px;
}

However, this property does not determine the number of rows in the grid. It only controls the row height. If you specify extra values, they will be ignored.

This is because, by default, the grid items will flow horizontally, meaning they will fill the first row, and if there is insufficient space, the remaining items will be moved to the second row, and so on.

Grid flow

Visit Code Demo 🔗

This default behavior is a bit problematic because sometimes, you only know how many rows you want, and you need the browser to create the columns automatically. In this case, you can change the flow direction of the grid items by setting grid-auto-flow to column.

Next, you can configure the gird rows, and this time, you can define the number of rows, as well as their sizes. The columns, on the other hand, will be created automatically.

.container {
  display: grid;
  grid-auto-flow: column;

  grid-template-rows: 100px 100px;
  grid-template-columns: 100px 200px 300px;
}

The grid template shorthand

Lastly, grid-template is a shorthand property for grid-template-columns and grid-template-rows with the following syntax:

grid-template: <row> <row> ... / <col> <col> ...;

.container {
  display: grid;
  grid-template: 100px 150px / auto auto auto;
}

Grid gaps

Visit Code Demo 🔗

When designing a webpage, it is good to leave some space between elements so that they are not too close to each other. By using the grid layout, you can easily add equal spacing between the grid items instead of micromanaging their individual margin. For example:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  row-gap: 10px;
  column-gap: 20px;
}

Alternatively, you may use the shorthand property, gap:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px 20px;
}

If you want equal spacing for columns and rows, give a single value:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}

Spanning over multiple columns

Visit Code Demo 🔗

You can also customize individual grid items using CSS. In a real-life scenario, it is common for one grid item to take up multiple columns or rows. For example, you can define an item to span multiple columns by specifying a start point (grid-column-start) and an end point (grid-column-end).

<div class="container">
  <div class="item-2col">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

.item-2col {
  grid-column-start: 1;
  grid-column-end: 3;
}

Keep in mind that the numbers refer to the column line, not the column itself, as shown in the chart below.

As a result, for an item to span over two columns, it should start from 1 and end with 3.

You can also use the shorthand property grid-column:

.item-2col {
  grid-column: 1 / 3;
}

Or use span:

.item-2col {
  grid-column: span 2;
}

.item-3col {
  grid-column: span 3;
}

Visit Code Demo 🔗

Spanning over multiple rows

.item-2row {
  grid-row-start: 1;
  grid-row-end: 3;
}

/* or shorthand */
.item-2row {
  grid-row: 1 / 3;
}

Spanning over an area

.item-area {
  grid-area: 1 / 1 / 3 / 3;
}

Nested grid systems

You can even nest grids for complex layouts. This helps maintain structure and consistency.

Visit Code Demo 🔗

Creating a Multi-column Layout Using CSS

TheDevSpace — Tue, 08 Apr 2025 14:43:00 +0000

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

Creating layouts using CSS is one of the most fundamental skills for a web developer. A well-designed layout is the backbone of any successful website, as it improves user experience and usability.

There are three most common methods for creating webpage layouts: columns, grids, and flexbox. Let's begin by discussing how to create a multi-column layout.

By default, the block-level elements will span over the entire viewport. But in practice, you don't want these elements, especially the text elements, to occupy too much horizontal space, as research shows that the optimal length of a single line is around 80 characters. People have limited attention span, and texts longer than that can be difficult for users to read.

The obvious solution for this problem is to split the layout into columns, which can be easily achieved using the column-* properties.

Column count and column width

To begin with, you can specify the number of columns using the column-count property.

Visit Code Demo 🔗

The browser will automatically choose the column width that will fit the entire layout inside the container.

Alternatively, you can set the column width, and let the browser pick the column count.

The browser will create as much columns as it possibly can, and then the remaining space will be shared by all columns. Which means you are unlikely to get the column width you specify, unless the viewport size is exactly divisible by the specified column width.

You can verify this claim using the Developer Tools in your browser.

It is not possible to customize the size for individual columns. If you want a more complex layout, you have to use grid or flexbox instead.

Column gap

You can also customize the gap between columns using the column-gap property. The default option is normal, which corresponds to 1em.

You can change that by setting a new length or percentage value. The percentage would be relative to the width of each column.

Visit Code Demo 🔗

Column rule

Using the column-rule property, you can also add a vertical rule between the columns, similar to how you may define a border. You can define a width, a style (solid, dotted, and more), and a color.

column-rule: 4px dotted blue;

Visit Code Demo 🔗

Spanning over columns

Sometimes, you might want an element to span over multiple columns. Take the <h2> element in the previous demo as an example, it is a bit cramped inside one column. The layout might look better if the heading can be taken out of the multi-column layout and be allowed to span over multiple columns.

This can be done with the column-span property by setting it to all, which allows the element to span over all columns.

Visit Code Demo 🔗

Unfortunately, there are only two options, all and none, which means you cannot tell the element to span over a certain number of columns. This is because the column properties are designed to create simple multi-column layouts. There are not much customizations available.

In the next two lessons, we will discuss grids and flexbox, which are used to create much more complex layouts.

How to Position Elements Using CSS

TheDevSpace — Mon, 07 Apr 2025 14:08:00 +0000

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

The position property controls how you wish to position an element. There are five different position methods available, including static, relative, fixed, absolute, and sticky. static is the default positioning method, meaning the element is not positioned in any special way.

Things get more interesting starting from the relative position.

Relative position

With the position set to relative, the element will be placed relative to its default position. It can be adjusted by setting the left, right, top, or bottom properties.

<div class="static">Static</div>
<div class="relative">Relative</div>

.static {
  position: static;
}

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

Visit Code Demo 🔗

Fixed position

fixed position means that the element is positioned relative to the viewport. This method can be useful when you need to create a component, such as a navigation bar, that always stays at the top of the webpage, no matter the user's scrolling position. Or when you need a pop-up window that stays at the bottom right corner.

<div class="fixed">Fixed</div>

.fixed {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

Visit Code Demo 🔗

Together, the right and bottom properties will anchor the <div> element to the bottom right corner of the webpage.

Absolute position

If an element has the absolute position, it will be placed according to its closest positioned ancestor, which should have a positioning method other than static.

<div class="relative">
  Relative
  <div class="absolute">Absolute</div>
</div>

.absolute {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

Visit Code Demo 🔗

In this example, .relative is a 500x500px box with relative position, and .absolute is a smaller box placed inside .relative. As you can see from the demonstration, the .absolute box is positioned relative to the .relative box instead of the viewport.

If the absolute element does not have a positioned ancestor, it will be positioned relative to the viewport, making it behave like a fixed element.

Sticky position

The sticky option is similar to fixed, except the element will be fixed only when a specific scroll threshold is reached.

<p>Lorem ipsum. . .</p>

<p>. . .</p>

<div class="sticky">Sticky</div>

<p>. . .</p>

.sticky {
  position: sticky;
  top: 10px;

  border: solid orange 2px;
  background-color: bisque;
  width: 100%;
  height: 100px;
}

Visit Code Demo 🔗

If you found this guide helpful, follow us on social media for more tips, tutorials, and updates on web development:

🔹 TheDevSpace | LinkedIn

🔹 TheDevSpace | X

🔹 TheDevSpace | Threads

Let's stay connected! 🚀

Using the `float` Property in CSS

TheDevSpace — Thu, 03 Apr 2025 04:00:00 +0000

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

Originally, the float property was used to take an HTML element (usually an image) out of the normal flow of the webpage and make it float on top of other elements. But then developers quickly realized you can use float to design entire webpage layouts, so that multiple columns of information could sit next to each other.

However, with the creation of modern layout techniques such as grid and flexbox, float gradually returned to its original purpose.

Float

Here is an example of using float:

Visit Code Demo 🔗

As you can see, the <div> element is taken out of the normal flow of the webpage, and it is now floating on top of the <p> element.

In this example, we are making the <div> box float to the left side. Similarly, you can make it float to the right side like this:

div {
  float: left;
  /* . . . */
}

You can also float multiple boxes together like this:

Visit Code Demo 🔗

Clearing float

Notice that when the <div> boxes are floating, all subsequent <p> elements will move up to fill their original space. If you want to change this default behavior, meaning you don't want the floated boxes to affect the layout of other elements, you can clear the side effects of float using the clear property.

Visit Code Demo 🔗

The clear property takes four values: none (default), left, right, and both.

When set to left, the side effects of left floated boxes will be removed, as shown in the demonstration. As you can see, the two <div> boxes are still floating next to each other, but the <p> element is no longer affected.

When set to right, the side effects of right floated boxes will be removed, and when set to both, the side effects of all floated boxes will be removed.

If you found this guide helpful, follow us on social media for more tips, tutorials, and updates on web development:

🔹 TheDevSpace | LinkedIn

🔹 TheDevSpace | X

🔹 TheDevSpace | Threads

Let's stay connected! 🚀

Using CSS Aspect Ratio for Consistent Image Sizing

TheDevSpace — Wed, 02 Apr 2025 08:30:00 +0000

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

Instead of defining the size of an element using the width and height properties, CSS also allows you to define its aspect ratio. For example:

<img src=". . ." alt="Image" />

img {
  border: solid 1px;
  width: 200px;

  aspect-ratio: 16 / 9;
}

In this case, the image is set to be 200px wide, and instead of specifying the height, we defined the aspect ratio to be 16:9. The browser will automatically calculate the height based on the ratio.

Visit Code Demo 🔗

If you found this guide helpful, follow us on social media for more tips, tutorials, and updates on web development:

🔹 TheDevSpace | LinkedIn

🔹 TheDevSpace | X

🔹 TheDevSpace | Threads

Let's stay connected! 🚀

Image Sizing and Object Fit in CSS

TheDevSpace — Mon, 31 Mar 2025 14:30:00 +0000

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

Previously, we talked about how to embed images using the <img> element. Just like any other block-level element, you can define a size for the image using the width and height attributes.

<img src="images/image.png" alt="Image" width="500" height="500" />

Visit Code Demo ↗

In this case, we defined the <img> element as a 500x500 box, but the actual image has a different aspect ratio, so it gets squished to fit inside. This might not be ideal because, in most cases, you want the image to keep its original aspect ratio.

Object fit

To solve this problem, you can use the object-fit property to specify how you wish the image to be displayed inside the defined box. The default option is fill, which means the images will be stretched or squished to fill the entire space, changing the image's aspect ratio.

To avoid that, you can set object-fit to contain. The image will shrink to fit inside the box.

Visit Code Demo ↗

Alternatively, you can set object-fit to cover, which works the other way. It will zoom in on the image until it fills the entire box.

Visit Code Demo ↗

Object position

Notice that it doesn't matter if you set object-fit to fill or cover. The browser will always zoom in on the center of that image. You can change how the image is positioned inside the box using the object-position property.

The property accepts keyword values such as top, bottom, left, and right, or combinations of these values such as top left, bottom right, and so on.

You can also micromanage the positioning of the image by specifying either percentage or length values.

object-position: <horizontal> <vertical>;

Visit Code Demo ↗

If you found this guide helpful, follow us on social media for more tips, tutorials, and updates on web development:

🔹 TheDevSpace | LinkedIn

🔹 TheDevSpace | X

🔹 TheDevSpace | Threads

Let's stay connected! 🚀

Mastering CSS Float Property for Modern Layouts

TheDevSpace — Fri, 28 Mar 2025 17:45:00 +0000

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

However, with the creation of modern layout techniques such as grid and flexbox, float gradually returned to its original purpose.

Float

Here is an example of using float:

➡️ View Code Demo

As you can see, the <div> element is taken out of the normal flow of the webpage, and it is now floating on top of the <p> element.

In this example, we are making the <div> box float to the left side. Similarly, you can make it float to the right side like this:

div {
  float: right;
  /* . . . */
}

You can also float multiple boxes together like this:

➡️ View Code Demo

Clearing float

➡️ View Code Demo

The clear property takes four values:

none (default)
left
right
both

When set to right, the side effects of right floated boxes will be removed, and when set to both, the side effects of all floated boxes will be removed.

If you found this guide helpful, follow us on social media for more tips, tutorials, and updates on web development:

🔹 TheDevSpace | LinkedIn

🔹 TheDevSpace | X

🔹 TheDevSpace | Threads

Let's stay connected! 🚀

Block vs. Inline vs. Inline-Block in CSS

TheDevSpace — Thu, 27 Mar 2025 20:53:51 +0000

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

Let's consider the following example:

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  <a href="/"
    >Fuga blanditiis delectus voluptatum molestias accusantium id repudiandae
    exercitationem!</a
  >
  Labore ipsum blanditiis vero, doloremque, nisi vel molestiae ea odio tempore
  recusandae dicta?
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum itaque eaque
  esse inventore incidunt delectus quia? Eos nam fuga sint obcaecati magnam.
  Fuga voluptatem doloremque quisquam eligendi libero. Deleniti, rerum.
</p>

Notice that the <p> element always starts on a new line and takes up as much horizontal space as possible. On the other hand, the <a> element does not start on a new line and only takes up as much space as necessary.

This is, in fact, the difference between the block elements and inline elements.

Most of the elements we mentioned so far are block elements, such as <p>, <div>, <h1> to <h6>, <li>, etc. Without extra styles defined, they will automatically take up as much horizontal space as possible.

The <a> element is an example of an inline element. It only takes up as much space as necessary when placed along side other elements. And the width and height attributes will have no effects on it.

There are many other elements, both block and inline elements available in HTML. It is impossible to discuss all of them in one lesson, but here is a reference of all HTML elements from W3Schools if you are interested.

Recall that we introduced the block and inline elements at the beginning of this chapter, where we explored the basics of HTML.

Block elements are those that automatically take up all the horizontal space available, but you can define custom width and height. Inline elements, on the other hand, only take as much space as necessary, and defining width and height has no effect on these elements.

Inline

However, you sometimes need to be more flexible when working on real-life projects. For example, you are trying to build a navigation bar that sits on top of the page, and you have a list of links here:

<ul>
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
</ul>

By default, <li> is a block element occupying the horizontal line.

This would waste a lot of vertical space. To fix this issue, you can change how the <li> elements are displayed using the display property.

li {
  display: inline;
}

And now, the <li> will be displayed as an inline element.

➡️ View Code Demo

Block

You can also make an inline element behave like a block element in a similar way.

<div><span>#1</span><span>#2</span></div>

span {
  border: 2px solid black;
  display: block;
}

➡️ View Code Demo

Inline block

If you need an inline element but you want to be able to customize its width and height, you can use inline-block instead.

span {
  border: 2px solid black;
  display: inline-block;
  width: 100px;
  height: 50px;
}

➡️ View Code Demo

`display` vs. `visibility`

display can also control whether or not an element is rendered on the webpage. If you set display to none, the element will not be displayed. This can create useful features when combined with JavaScript, allowing you to toggle the element on and off.

This behavior is very similar to another CSS property called visibility. Their difference is that when visibility is set to hidden, the element is still on the webpage, just not displayed by the browser. It will take up the same space as before. When display is set to none, the element will be completely removed from the webpage.

The display property is probably the most important CSS property we are going to cover in this chapter. It not only controls the display types of individual elements, but also the layout of its children. However, this requires a deeper understanding of CSS, so we will come back to this topic later.

If you found this guide helpful, follow us on social media for more tips, tutorials, and updates on web development:

🔹 TheDevSpace | LinkedIn

🔹 TheDevSpace | X

🔹 TheDevSpace | Threads

Let's stay connected! 🚀

Forem: TheDevSpace

Comparing Visibility, Opacity, and Display: hidden in CSS

Visibility

Opacity

Visibility vs. opacity vs. display: hidden

Stacking Elements with Z-index in CSS

Understanding Justify and Align in CSS

Grid layout

Row alignment

Column alignment

Alignment in both directions

Flex layout

Parallel to the main axis

Perpendicular to the main axis

CSS Flexbox: Layouts Made Easy

Flex direction

Flex wrap

Mastering CSS Grid Layout: Columns, Rows, Gaps, and More

Grid columns

Grid rows

Grid flow

The grid template shorthand

Grid gaps

Spanning over multiple columns

Spanning over multiple rows

Spanning over an area

Nested grid systems

Creating a Multi-column Layout Using CSS

Column count and column width

Column gap

Column rule

Spanning over columns

Related Lessons

How to Position Elements Using CSS

Relative position

Fixed position

Absolute position

Sticky position

Read More

Using the `float` Property in CSS

Float

Clearing float

Read More

Using CSS Aspect Ratio for Consistent Image Sizing

Read More

Image Sizing and Object Fit in CSS

Object fit

Object position

Read More

Mastering CSS Float Property for Modern Layouts

Float

Clearing float

Read More

Block vs. Inline vs. Inline-Block in CSS

Inline

Block

Inline block

display vs. visibility

Read More

`display` vs. `visibility`