CSS - Code Sample : Display Properties and Box Manipulation

Display Properties and Box Manipulation Examples in CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Display and Box Manipulation Example</title>
    <style>
        .container {
            width: 500px;
            border: 1px solid black;
            padding: 10px;
            margin: 20px;
            box-sizing: border-box;
        }
        .block {
            display: block;
            background-color: lightblue;
            margin-bottom: 10px;
        }
        .inline {
            display: inline;
            background-color: lightgreen;
        }
        .inline-block {
            display: inline-block;
            width: 100px;
            background-color: lightcoral;
            margin: 5px;
        }
        .flex {
            display: flex;
            justify-content: space-around;
        }
        .item {
            padding: 10px;
            border: 1px solid grey;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="block">Block element</div>
        <span class="inline">Inline</span>
        <span class="inline">element</span>
        <div class="inline-block">Inline-block</div>
        <div class="inline-block">element</div>
        <div class="flex">
            <div class="item">Flex item 1</div>
            <div class="item">Flex item 2</div>
        </div>
    </div>
</body>
</html>

Explanation of the Code

  • Container: Styled with margin, padding, and border to show how to manipulate boxes in a simple way. box-sizing: border-box; makes sure the border and padding are contained inside the designated width.
  • Block: A div that spans its container's width and has a display: block set to it.
  • Inline: Only take up as much space as necessary when spanning items with display: inline.
  • Inline-Block: Elements presented as inline-blocks have a fixed width and can be customized using margins.
  • Flex: A flex container that uniformly distributes the child components, or flex items, over the area.

 

logo

CSS

Beginner 5 Hours

Display Properties and Box Manipulation Examples in CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Display and Box Manipulation Example</title>
    <style>
        .container {
            width: 500px;
            border: 1px solid black;
            padding: 10px;
            margin: 20px;
            box-sizing: border-box;
        }
        .block {
            display: block;
            background-color: lightblue;
            margin-bottom: 10px;
        }
        .inline {
            display: inline;
            background-color: lightgreen;
        }
        .inline-block {
            display: inline-block;
            width: 100px;
            background-color: lightcoral;
            margin: 5px;
        }
        .flex {
            display: flex;
            justify-content: space-around;
        }
        .item {
            padding: 10px;
            border: 1px solid grey;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="block">Block element</div>
        <span class="inline">Inline</span>
        <span class="inline">element</span>
        <div class="inline-block">Inline-block</div>
        <div class="inline-block">element</div>
        <div class="flex">
            <div class="item">Flex item 1</div>
            <div class="item">Flex item 2</div>
        </div>
    </div>
</body>
</html>

Explanation of the Code

  • Container: Styled with margin, padding, and border to show how to manipulate boxes in a simple way. box-sizing: border-box; makes sure the border and padding are contained inside the designated width.
  • Block: A div that spans its container's width and has a display: block set to it.
  • Inline: Only take up as much space as necessary when spanning items with display: inline.
  • Inline-Block: Elements presented as inline-blocks have a fixed width and can be customized using margins.
  • Flex: A flex container that uniformly distributes the child components, or flex items, over the area.

 

Related Tutorials

Frequently Asked Questions for CSS

Content, padding, border, and margin make up the box model.

Relative moves from original position; absolute positions relative to nearest positioned ancestor.

id is unique; class can be reused.

visibility hides but keeps space; display removes element from layout.

Minify files, reduce specificity, and remove unused styles.

Overrides all other declarations, regardless of specificity.

Use margin: auto or flexbox/grid techniques.

Allow responsive design by applying styles based on screen size or device.

Define relationships between selectors: descendant ( ), child (>), adjacent (+), sibling (~).

Tools like SASS or LESS add features like variables and nesting to CSS.

Targets part of an element, like ::before or ::after.

Use @import "filename.css"; at the top of the file.

Controls stacking order of overlapping elements.

Forces a property to inherit value from parent.

Static — not affected by top, bottom, left, or right.

Use universal selector * or define styles in body/root.

em is relative to parent; rem is relative to root element.

Inline, internal (embedded), and external CSS.

A layout model for arranging elements in rows or columns with flexible sizing.

Targets elements in a specific state, like :hover or :nth-child().

Use fluid layouts, media queries, and relative units.

CSS styles HTML elements to control layout, color, fonts, and responsiveness.

Reusable custom property values, declared with --var-name.

Determines which rule applies when multiple rules target the same element.

Performs calculations to dynamically set CSS property values.

line

Copyrights © 2024 letsupdateskills All rights reserved