**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** The Box Model and Layout Fundamentals **Topic:** Working with display properties: block, inline, inline-block, and none. In the previous topics, we explored the box model and how to apply basic styles to HTML elements using CSS. Now, it's time to dive into the world of display properties, which play a crucial role in controlling the layout and appearance of elements on a web page. **What are display properties?** In CSS, the `display` property is used to define the type of box an element should generate. In other words, it determines how an element is displayed and laid out on a web page. There are four main display properties: `block`, `inline`, `inline-block`, and `none`. ### 1. Block Display Property The `block` display property is used to generate a block box, which takes up the full width available and starts on a new line. Block-level elements typically have a height and a width, and they can contain other block-level elements and inline elements. **Examples of block-level elements:** * `div` * `p` * `h1`-`h6` * `ul` * `ol` * `li` Here's an example of how to apply the `block` display property to an element: ```css .block-element { display: block; width: 50%; height: 200px; background-color: #f2f2f2; padding: 20px; border: 1px solid #ddd; } ``` ### 2. Inline Display Property The `inline` display property is used to generate an inline box, which takes up only the space needed to display its content and does not start on a new line. Inline elements do not have a height or width, and they cannot contain other block-level elements. **Examples of inline elements:** * `span` * `a` * `img` * `input` * `textarea` Here's an example of how to apply the `inline` display property to an element: ```css .inline-element { display: inline; padding: 10px; border: 1px solid #ddd; } ``` ### 3. Inline-Block Display Property The `inline-block` display property is used to generate an inline-level block box, which takes up only the space needed to display its content, but also allows the element to have a height and width. **Examples of inline-block elements:** * `img` * `input` * `textarea` * `button` Here's an example of how to apply the `inline-block` display property to an element: ```css .inline-block-element { display: inline-block; width: 200px; height: 50px; background-color: #f2f2f2; padding: 20px; border: 1px solid #ddd; } ``` ### 4. None Display Property The `none` display property is used to hide an element completely, making it invisible on the web page. Here's an example of how to apply the `none` display property to an element: ```css .hidden-element { display: none; } ``` **Key Concepts:** * The `display` property is used to define the type of box an element should generate. * Block-level elements take up the full width available and start on a new line. * Inline elements take up only the space needed to display their content and do not start on a new line. * Inline-block elements take up only the space needed to display their content and allow the element to have a height and width. * The `none` display property is used to hide an element completely. **Practical Takeaways:** * Use the `block` display property to create layout elements that take up the full width available. * Use the `inline` display property to create elements that take up only the space needed to display their content. * Use the `inline-block` display property to create elements that have a height and width, but also take up only the space needed to display their content. * Use the `none` display property to hide an element completely on the web page. **MDN Web Docs Resources:** * Display property: https://developer.mozilla.org/en-US/docs/Web/CSS/display * Block-level elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements * Inline elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements **Exercise:** * Create a web page that demonstrates the use of each display property: `block`, `inline`, `inline-block`, and `none`. * Use HTML elements to create a layout that showcases each display property. * Style the elements using CSS to visualize the difference between each display property. **What's Next:** In the next topic, we will explore positioning elements: `static`, `relative`, `absolute`, and `fixed`. We will learn how to control the position of elements on a web page and create complex layouts. **Leave a Comment or Ask for Help:** If you have any questions or need help with understanding the display properties, feel free to leave a comment below.