Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS block-size Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
๐Ÿ‘๏ธ 10 - Views
โณ 4 mins
๐Ÿ’ฌ 1 Comment
CSS block-size Property

Photo Credit to CodeToFun

๐Ÿ™‹ Introduction

The block-size property in CSS allows developers to set the size of an elementโ€™s block dimension, which corresponds to the height in horizontal writing modes and the width in vertical writing modes.

This property is particularly useful for creating responsive designs, as it adapts to the writing mode of the content.

๐Ÿ’ก Syntax

The syntax for the block-size property is straightforward. You can specify a length, percentage, or an auto value.

Syntax
Copied
Copy To Clipboard
element {
  block-size: value;
}

๐ŸŽ›๏ธ Default Value

The default value of the block-size property is auto, which means the size is determined by the element's content, padding, borders, and margins.

๐Ÿ  Property Values

ValueDescription
lengthSpecifies a fixed block size using units like px, em, rem, etc.
percentageSpecifies the block size as a percentage of the containing block.
autoThe browser calculates the block size based on the content and other CSS properties.
max-contentThe block size is defined by the contentโ€™s intrinsic maximum size.
min-contentThe block size is defined by the contentโ€™s intrinsic minimum size.
fit-contentThe block size is calculated to fit the content but does not exceed a specified value.

๐Ÿ“„ Example

In this example, we'll set the block size of a div element to 200px. This means the height will be 200px in horizontal writing modes.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS block-size Example</title>
  <style>
    .box {
      block-size: 200px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <h1>Block Size Example</h1>
  <div class="box">This box has a block size of 200px.</div>
</body>
</html>

๐Ÿ–ฅ๏ธ Browser Compatibility

The block-size property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is recommended to test your design across different browsers to ensure consistency in appearance.

๐ŸŽ‰ Conclusion

The block-size property is a versatile tool for controlling the dimension of elements in the block direction, allowing for more responsive and adaptable designs.

By using this property, you can ensure that your layouts are consistent and work well with different writing modes and screen sizes. Experiment with different values to see how they affect the layout of your content.

๐Ÿ‘จโ€๐Ÿ’ป Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
๐Ÿ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy