websitebuildersnow
[ad_1]
CSS display properties are a powerful tool for web designers. You can control the layout of your website elements with minimal styling using simple, easy-to-remember values.
But what do each of these values do and how do they work?
What are CSS display properties?
The display property specifies the type of box rendering used for HTML elements on the web page. This causes various behaviors, including not displaying at all. These values can be edited on your website using the appropriate CSS customization section of your style sheet or CMS tool such as WordPress.
Keep Elements Fit for CSS Rendering: Inline
Width and height values do not apply to inline elements. The inner content sets its dimensions. Inline HTML elements can be placed side by side with other elements, <スパン>Inline display is most commonly used for text.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
background-color: yellow;
padding: 10px 0px 10px 10px;
}
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>
The HTML markup and CSS above are good examples of display inline values. When used together, it displays a single line of text made up of two different HTML elements.
Control website layout with CSS display: block
In some respects, the display block value is the opposite of the inline value. Height and width dimensions can be set, but elements with this value cannot be placed next to each other. The example above shows two elements with block values. An element with a default value for block display value will have the maximum width of its parent element.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
background-color: yellow;
padding: 10px 10px 10px 10px;
}
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>
Unlike the inline style example, this display block value example splits the text line into two separate lines. The fit-content width value sets the width of the element to match the text length.
Tile HTML elements in CSS view: inline-block
The CSS display inline-block value works just like a regular inline value, only with the ability to add a specific size. This allows you to create grid-like layouts without placing parent elements. Returning to the previous example, adding the inline-block value allows the elements to be placed next to each other.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
background-color: yellow;
padding: 10px 10px 10px 10px;
}
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>
The inline-block value doesn’t look much different than the inline value. Note, however, that this value can be used to set the dimensions of the element. This makes things easier in some cases.
Hide website elements in CSS rendering: none
The simplest display value is “none”. This value hides the element and child elements along with margins and other spacing properties. Elements with the CSS display none value will still be visible within the browser’s inspector.
Create flexible and responsive elements with CSS display: flex
Display flex is one of the modern CSS layout modes. When display flex is on a parent element, all elements inside it become flexible CSS elements. The parent element of this configuration is flexbox.
Flexbox creates a responsive design using predefined variables such as width and height. It’s worth learning about HTML/CSS flexbox before you start.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
background-color: yellow;
width: 40%;
height: 100px;
}
background-color: lightgreen;
width: 25%;
height: 100px;
}
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html> Tile flexboxes with display: inline-flex
Inline-flex works just like regular flexbox, with the added benefit of allowing elements to be placed next to other elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
background-color: yellow;
width: 40%;
height: 100px;
}
background-color: lightgreen;
width: 25%;
height: 100px;
}
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html> Create complex tables with CSS display: table
The display table values are reminiscent of old website designs. Most websites today don’t use tables for layout, but they are still useful for presenting data and content in an easy-to-read format.
Adding a table value to an HTML element works like a table element, but the table requires additional values to function properly.
CSS display: table-cell
Elements with table-cell values act as individual cells within the main table. It also groups these individual cells by table-column and table-row values.
CSS display: table-row
The table-row value is
Works like an HTML element. Splits the table into horizontal rows, parenting elements with table-cell values.CSS display: table-column
A table-column value works like a table-row value, but does not partition the table. Instead, you can use this value to add specific CSS rules to various existing columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
display: table-column-group;
background-color: yellow;
}
display: table-column-group;
background-color: lightgreen;
}
display: table-column-group;
background-color: lightblue;
}
display: table-row;
}
display: table-row;
}
display: table-row;
}
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html> Create a side-by-side table using CSS display: inline-table
Like other inline variants we’ve already seen, inline-table allows you to place table elements next to other elements.
Build a responsive website layout using CSS display: grid
CSS display grid values are similar to table values, but only grid columns and rows have flexible sizing. This makes grids ideal for creating the main layout of a web page. It also allows you to have different sized content areas while leaving room for full width headers and footers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>
Grids are similar to flexboxes, except that they allow elements to be placed one above the other. The grid-template-areas property is essential for this. As you can see from the code, he uses 4 spaces in the array because the headers and footers are full width. The sidebars occupy one slot each, but the content he occupies two slots, effectively dividing the middle row of the grid into he three columns.
CSS Display: Inline Grid
The inline-grid value allows you to position the grid next to other elements, just like the other inline values in this guide.
Using CSS display for web design
CSS display properties provide a convenient way to adjust the element structure of your website without changing the HTML markup. This is ideal for those using content delivery platforms like Shopify and WordPress, but it can also be useful for general web design.
[ad_2]
Source link
GIPHY App Key not set. Please check settings