Skip to main content

Default css for html element

The default CSS for a div element is quite minimal. By default, a div is a block-level element, which means it takes up the full width available and starts on a new line. Here are the default styles that typically apply to a div element in most browsers:

div {
    display: block;
    /* Inherit font properties, color, etc., from its parent if not explicitly set */
}

To elaborate, here are some characteristics of a div element with its default CSS:

  1. Display:

    • display: block;
    • This makes the div a block-level element, causing it to take up the full width of its container and start on a new line.

  2. Margin, Padding, and Border:

    • By default, div elements have no margins, padding, or borders unless specified by the user or the browser's user agent stylesheet.
    • Example: 
      div {
          margin: 0;
          padding: 0;
          border: none;
      }

  3. Width and Height:

    • The default width of a div is 100% of its containing element (if not explicitly set).
    • The default height of a div is determined by its content (if not explicitly set).

  4. Other Properties:

    • Inherits font properties, color, and other styles from its parent element if not explicitly set.

For example, the complete default user agent stylesheet for a div might look like this:

div {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

These styles are very basic and provide a clean slate for developers to apply their custom styles using CSS. Different browsers might have slight variations in their user agent stylesheets, but the fundamental defaults for div elements are generally consistent across modern browsers.

When you set the display property of an element to flex, several default properties and values are applied to its children (the flex items). These defaults control how the flex items are sized, aligned, and spaced within the flex container. Here are the key properties and their default values:

Default Properties and Values for Flex Items​

  1. flex-direction: row

    • This means the main axis is horizontal, and flex items are placed from left to right.

  2. flex-wrap: nowrap

    • Flex items will not wrap; they will be kept on a single line.

  3. justify-content: flex-start

    • Flex items are aligned at the start of the main axis (left side for flex-direction: row).

  4. align-items: stretch

    • Flex items are stretched to fill the flex container along the cross axis (vertically for flex-direction: row).

  5. align-content: stretch

    • This property affects the alignment of flex lines when there is extra space in the cross axis, but it only has an effect when there are multiple lines of flex items (i.e., when flex-wrap is not nowrap).

Default Properties and Values for Individual Flex Items​

  1. order: 0

    • The order in which flex items appear. Items with lower values are displayed first.

  2. flex-grow: 0

    • Flex items do not grow to fill the available space by default.

  3. flex-shrink: 1

    • Flex items will shrink to fit into the container if necessary.

  4. flex-basis: auto

    • The initial main size of a flex item is based on its content, before any remaining space is distributed.

  5. align-self: auto

    • Flex items inherit the align-items value from their flex container unless explicitly overridden.

Example of Default Flexbox Behavior​

Here is an example to demonstrate the default behavior of a flex container and its flex items:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default Flexbox Properties</title>
    <style>
        .container {
            display: flex;
            /* Default flex container properties: */
            /* flex-direction: row; */
            /* flex-wrap: nowrap; */
            /* justify-content: flex-start; */
            /* align-items: stretch; */
            /* align-content: stretch; */
            height: 100vh;
            border: 2px solid black;
        }
        .item {
            /* Default flex item properties: */
            /* order: 0; */
            /* flex-grow: 0; */
            /* flex-shrink: 1; */
            /* flex-basis: auto; */
            /* align-self: auto; */
            margin: 10px;
            padding: 20px;
            background-color: lightblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

In this example:

  • The flex container has the default flex properties applied (flex-direction: row, flex-wrap: nowrap, justify-content: flex-start, align-items: stretch, align-content: stretch).
  • The flex items have the default flex item properties applied (order: 0, flex-grow: 0, flex-shrink: 1, flex-basis: auto, align-self: auto).

Each flex item will be laid out horizontally, starting from the left, and will stretch to fill the container vertically. They will not grow to fill the available space unless explicitly specified, but they will shrink if necessary to fit within the container.

When set the property of the element to inline-flex​

When you set the display property of an element to inline-flex, it behaves similarly to flex, but the container itself is an inline-level element rather than a block-level element. This means the flex container will only take up as much width as its content requires, allowing it to sit inline with other elements. The default properties and values for the children (flex items) remain the same as for a display: flex container.

Default Properties and Values for Flex Items with display: inline-flex​

  1. flex-direction: row

    • Flex items are laid out horizontally, from left to right.

  2. flex-wrap: nowrap

    • Flex items are kept on a single line and do not wrap.

  3. justify-content: flex-start

    • Flex items are aligned at the start of the main axis (left side for flex-direction: row).

  4. align-items: stretch

    • Flex items are stretched to fill the flex container along the cross axis (vertically for flex-direction: row).

  5. align-content: stretch

    • Affects the alignment of flex lines when there is extra space in the cross axis, but only has an effect when there are multiple lines of flex items (i.e., when flex-wrap is not nowrap).

Default Properties and Values for Individual Flex Items with display: inline-flex​

  1. order: 0

    • The order in which flex items appear. Items with lower values are displayed first.

  2. flex-grow: 0

    • Flex items do not grow to fill the available space by default.

  3. flex-shrink: 1

    • Flex items will shrink to fit into the container if necessary.

  4. flex-basis: auto

    • The initial main size of a flex item is based on its content, before any remaining space is distributed.

  5. align-self: auto

    • Flex items inherit the align-items value from their flex container unless explicitly overridden.

Example of Default Inline Flexbox Behavior​

Here is an example to demonstrate the default behavior of an inline-flex container and its flex items:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default Inline-Flex Properties</title>
    <style>
        .container {
            display: inline-flex;
            /* Default flex container properties: */
            /* flex-direction: row; */
            /* flex-wrap: nowrap; */
            /* justify-content: flex-start; */
            /* align-items: stretch; */
            /* align-content: stretch; */
            border: 2px solid black;
            padding: 10px;
        }
        .item {
            /* Default flex item properties: */
            /* order: 0; */
            /* flex-grow: 0; */
            /* flex-shrink: 1; */
            /* flex-basis: auto; */
            /* align-self: auto; */
            margin: 10px;
            padding: 20px;
            background-color: lightblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
    <p>This is a paragraph that sits inline with the flex container.</p>
</body>
</html>

In this example:

  • The container has display: inline-flex, meaning it will behave like an inline element and only take up as much width as its content requires.
  • The flex items have the same default properties as in a flex container (order: 0, flex-grow: 0, flex-shrink: 1, flex-basis: auto, align-self: auto).

The flex container will align with other inline elements, such as the paragraph in this example. The flex items within the container will be laid out horizontally, starting from the left, and will stretch to fill the container vertically. They will not grow to fill the available space unless explicitly specified, but they will shrink if necessary to fit within the container.

When set the property of the element to grid​

When you set the display property of an element to grid, it creates a grid container. This container has default properties and values that apply to its child elements (the grid items). Here’s a detailed breakdown of the default behaviors for both the grid container and the grid items when using display: grid.

Default Properties and Values for Grid Container​

  1. grid-template-columns: none

    • No columns are defined by default. The grid will auto-generate columns based on the number of grid items and their sizes.

  2. grid-template-rows: none

    • No rows are defined by default. The grid will auto-generate rows based on the number of grid items and their sizes.

  3. grid-auto-flow: row

    • Grid items are placed in the grid by filling each row from left to right before moving down to the next row.

  4. grid-gap: 0

    • No gap (spacing) between grid items by default. You can specify gaps using grid-gap, grid-column-gap, or grid-row-gap.

  5. justify-items: stretch

    • Grid items will stretch to fill the available space in their respective grid cells along the inline (row) axis.

  6. align-items: stretch

    • Grid items will stretch to fill the available space in their respective grid cells along the block (column) axis.

  7. justify-content: start

    • The entire grid is aligned at the start of the grid container along the inline (row) axis.

  8. align-content: start

    • The entire grid is aligned at the start of the grid container along the block (column) axis.

Default Properties and Values for Individual Grid Items​

  1. grid-column-start: auto

    • The starting position of the grid item in the grid. It will automatically occupy the cell it is placed in.

  2. grid-column-end: auto

    • The ending position of the grid item in the grid. This value is automatically determined based on the grid item’s size.

  3. grid-row-start: auto

    • The starting position of the grid item in the grid rows, automatically determined.

  4. grid-row-end: auto

    • The ending position of the grid item in the grid rows, also automatically determined.

  5. grid-area: auto

    • The grid item will occupy the space defined by its starting and ending row and column values.

  6. justify-self: auto

    • This property allows you to align the grid item within its own cell along the inline (row) axis. By default, it inherits the value from justify-items.

  7. align-self: auto

    • This property allows you to align the grid item within its own cell along the block (column) axis. By default, it inherits the value from align-items.

Example of Default Grid Behavior​

Here’s an example to demonstrate the default behavior of a grid container and its grid items:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default Grid Properties</title>
    <style>
        .container {
            display: grid;
            /* Default grid container properties: */
            /* grid-template-columns: none; */
            /* grid-template-rows: none; */
            /* grid-auto-flow: row; */
            /* grid-gap: 0; */
            /* justify-items: stretch; */
            /* align-items: stretch; */
            /* justify-content: start; */
            /* align-content: start; */
            grid-template-columns: repeat(3, 1fr); /* For visual demonstration */
            gap: 10px; /* Adding some gap for visibility */
        }
        .item {
            /* Default grid item properties: */
            /* grid-column-start: auto; */
            /* grid-column-end: auto; */
            /* grid-row-start: auto; */
            /* grid-row-end: auto; */
            /* grid-area: auto; */
            /* justify-self: auto; */
            /* align-self: auto; */
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

Explanation of the Example​

  • The .container is defined as a grid container with display: grid. The example includes grid-template-columns: repeat(3, 1fr) to create three equal columns for visual demonstration.
  • The gap property is set to 10px to provide spacing between grid items, which is different from the default value of 0.
  • The grid items will automatically occupy the available grid cells based on the grid’s configuration. They will stretch to fill their respective grid cells due to the default align-items: stretch.

Summary​

  • Grid Container: By default, it will create an unstructured grid without any defined columns or rows but will automatically accommodate grid items based on their size.
  • Grid Items: By default, they will automatically fit into the grid, starting from the top-left and filling in rows. Their alignment will be stretch by default, allowing them to fill their grid cells completely.

The default behavior can be adjusted using various grid properties to create more complex layouts as needed.

When set the property of the element to inline-grid​

When you set the display property of an element to inline-grid, it behaves similarly to grid, but the container itself is treated as an inline-level element. This means the inline grid container only takes up as much width as its content requires and can sit inline with other elements. The default properties and values applied to the children (grid items) remain the same as for a display: grid container.

Default Properties and Values for Inline Grid Container​

  1. grid-template-columns: none

    • No columns are defined by default. The grid will auto-generate columns based on the number of grid items and their sizes.

  2. grid-template-rows: none

    • No rows are defined by default. The grid will auto-generate rows based on the number of grid items and their sizes.

  3. grid-auto-flow: row

    • Grid items are placed in the grid by filling each row from left to right before moving down to the next row.

  4. grid-gap: 0

    • No gap (spacing) between grid items by default. You can specify gaps using grid-gap, grid-column-gap, or grid-row-gap.

  5. justify-items: stretch

    • Grid items will stretch to fill the available space in their respective grid cells along the inline (row) axis.

  6. align-items: stretch

    • Grid items will stretch to fill the available space in their respective grid cells along the block (column) axis.

  7. justify-content: start

    • The entire grid is aligned at the start of the grid container along the inline (row) axis.

  8. align-content: start

    • The entire grid is aligned at the start of the grid container along the block (column) axis.

Default Properties and Values for Individual Grid Items​

  1. grid-column-start: auto

    • The starting position of the grid item in the grid. It will automatically occupy the cell it is placed in.

  2. grid-column-end: auto

    • The ending position of the grid item in the grid. This value is automatically determined based on the grid item’s size.

  3. grid-row-start: auto

    • The starting position of the grid item in the grid rows, automatically determined.

  4. grid-row-end: auto

    • The ending position of the grid item in the grid rows, also automatically determined.

  5. grid-area: auto

    • The grid item will occupy the space defined by its starting and ending row and column values.

  6. justify-self: auto

    • This property allows you to align the grid item within its own cell along the inline (row) axis. By default, it inherits the value from justify-items.

  7. align-self: auto

    • This property allows you to align the grid item within its own cell along the block (column) axis. By default, it inherits the value from align-items.

Example of Default Inline Grid Behavior​

Here’s an example to demonstrate the default behavior of an inline-grid container and its grid items:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default Inline-Grid Properties</title>
    <style>
        .container {
            display: inline-grid;
            /* Default grid container properties: */
            /* grid-template-columns: none; */
            /* grid-template-rows: none; */
            /* grid-auto-flow: row; */
            /* grid-gap: 0; */
            /* justify-items: stretch; */
            /* align-items: stretch; */
            /* justify-content: start; */
            /* align-content: start; */
            grid-template-columns: repeat(3, 1fr); /* For visual demonstration */
            gap: 10px; /* Adding some gap for visibility */
        }
        .item {
            /* Default grid item properties: */
            /* grid-column-start: auto; */
            /* grid-column-end: auto; */
            /* grid-row-start: auto; */
            /* grid-row-end: auto; */
            /* grid-area: auto; */
            /* justify-self: auto; */
            /* align-self: auto; */
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
    <p>This is a paragraph that sits inline with the grid container.</p>
</body>
</html>

Explanation of the Example​

  • The .container is defined as an inline grid container with display: inline-grid. The example includes grid-template-columns: repeat(3, 1fr) to create three equal columns for visual demonstration.
  • The gap property is set to 10px to provide spacing between grid items, which is different from the default value of 0.
  • The grid items will automatically occupy the available grid cells based on the grid’s configuration. They will stretch to fill their respective grid cells due to the default align-items: stretch.

Summary​

  • Inline Grid Container: By default, it behaves like an inline-level element and will take up only as much space as needed for its content, allowing it to align with other inline elements.
  • Grid Items: They will automatically fit into the grid, starting from the top-left and filling in rows. Their alignment will be stretch by default, allowing them to fill their grid cells completely.

You can further customize the layout by defining specific rows and columns, gaps, and item placements as needed to create complex grid layouts.

Default css when we use Tailwind css​

The default values for flex items when the parent element is set to display: flex in Tailwind CSS are the same as the default values in normal CSS. Tailwind CSS adheres to the standard CSS flexbox model, so the initial values applied to flex properties in Tailwind match those defined in the CSS Flexbox specification.

Default Flexbox Values​

When a parent element is set to display: flex, the following default values are applied to the parent and its children in both normal CSS and Tailwind CSS:

Parent Element Defaults:​

  1. flex-direction:

    • Default value: row
    • Meaning: The flex items are arranged in a horizontal row.

  2. flex-wrap:

    • Default value: nowrap
    • Meaning: Flex items are displayed in a single line, without wrapping.

  3. justify-content:

    • Default value: flex-start
    • Meaning: Flex items are aligned to the start of the flex container's main axis.

  4. align-items:

    • Default value: stretch
    • Meaning: Flex items are stretched to fill the flex container along the cross axis.

  5. align-content:

    • Default value: stretch
    • Meaning: This property has no effect when flex-wrap is nowrap. If wrapping is enabled, it aligns the flex lines along the cross axis.

Child Element Defaults:​

  1. flex-grow:

    • Default value: 0
    • Meaning: Flex items do not grow by default.

  2. flex-shrink:

    • Default value: 1
    • Meaning: Flex items shrink if necessary to fit the container.

  3. flex-basis:

    • Default value: auto
    • Meaning: The initial main size of the flex item is based on its content.

Tailwind CSS Classes for Flexbox​

Tailwind CSS provides utility classes to explicitly set these flexbox properties. Here are the equivalent classes for the default values:

Parent Element Classes:​

  • flex: Sets display: flex;
  • flex-row: Sets flex-direction: row;
  • flex-no-wrap: Sets flex-wrap: nowrap;
  • justify-start: Sets justify-content: flex-start;
  • items-stretch: Sets align-items: stretch;
  • content-stretch: Sets align-content: stretch;

Child Element Classes:​

  • flex-grow-0: Sets flex-grow: 0;
  • flex-shrink: Sets flex-shrink: 1;
  • basis-auto: Sets flex-basis: auto;

Example Comparison: Normal CSS vs. Tailwind CSS​

Normal CSS:​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            /* flex-direction: row; (default) */
            /* flex-wrap: nowrap; (default) */
            /* justify-content: flex-start; (default) */
            /* align-items: stretch; (default) */
        }
        .item {
            /* flex-grow: 0; (default) */
            /* flex-shrink: 1; (default) */
            /* flex-basis: auto; (default) */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Tailwind CSS:​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Flexbox Example</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="flex">
        <div class="flex-grow-0 flex-shrink basis-auto">Item 1</div>
        <div class="flex-grow-0 flex-shrink basis-auto">Item 2</div>
        <div class="flex-grow-0 flex-shrink basis-auto">Item 3</div>
    </div>
</body>
</html>

Summary​

  • Both normal CSS and Tailwind CSS share the same default values for flexbox properties when display: flex is set on a parent element.
  • Tailwind CSS provides utility classes to explicitly set these properties, making it easy to override defaults as needed.
  • Understanding these defaults helps in using Tailwind CSS more effectively and customizing layouts with flexbox.

In Tailwind CSS, you do not need to explicitly define the default values for flex properties, just like in normal CSS. When you use the flex class in Tailwind CSS, the default flexbox values are automatically applied to the flex container and its children. You only need to define classes if you want to override these default values.

Default Flexbox Properties in Tailwind CSS​

When you apply the flex class to a parent element in Tailwind CSS, the following default properties are applied automatically:

  • Parent Element (Flex Container) Defaults:

    • display: flex; (applied by the flex class)
    • flex-direction: row; (default)
    • flex-wrap: nowrap; (default)
    • justify-content: flex-start; (default)
    • align-items: stretch; (default)
    • align-content: stretch; (default)

  • Child Elements (Flex Items) Defaults:

    • flex-grow: 0; (default)
    • flex-shrink: 1; (default)
    • flex-basis: auto; (default)

Example​

Here’s an example showing that you don't need to define the default values explicitly in Tailwind CSS:

HTML with Tailwind CSS​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Flex Example</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="flex">
        <div class="p-4 bg-red-500">Item 1</div>
        <div class="p-4 bg-blue-500">Item 2</div>
        <div class="p-4 bg-green-500">Item 3</div>
    </div>
</body>
</html>

Explanation​

  • The parent div has the flex class applied, which sets display: flex; and applies all default flexbox properties.
  • Each child div does not need any additional classes to apply the default flexbox properties (flex-grow: 0;, flex-shrink: 1;, flex-basis: auto;).

Overriding Defaults​

If you want to override the default values, you can use Tailwind CSS utility classes:

  • Change Flex Direction:

    • flex-row: Sets flex-direction: row; (default)
    • flex-col: Sets flex-direction: column;

  • Change Justify Content:

    • justify-start: Sets justify-content: flex-start; (default)
    • justify-center: Sets justify-content: center;
    • justify-end: Sets justify-content: flex-end;
    • justify-between: Sets justify-content: space-between;
    • justify-around: Sets justify-content: space-around;

  • Change Align Items:

    • items-stretch: Sets align-items: stretch; (default)
    • items-start: Sets align-items: flex-start;
    • items-center: Sets align-items: center;
    • items-end: Sets align-items: flex-end;
    • items-baseline: Sets align-items: baseline;

  • Change Flex Wrap:

    • flex-no-wrap: Sets flex-wrap: nowrap; (default)
    • flex-wrap: Sets flex-wrap: wrap;
    • flex-wrap-reverse: Sets flex-wrap: wrap-reverse;

  • Change Flex Grow, Shrink, and Basis for Child Elements:

    • flex-grow: Sets flex-grow: 1;
    • flex-grow-0: Sets flex-grow: 0;
    • flex-shrink: Sets flex-shrink: 1; (default)
    • flex-shrink-0: Sets flex-shrink: 0;
    • basis-auto: Sets flex-basis: auto; (default)
    • basis-1/2: Sets flex-basis: 50%;

Example with Overridden Defaults​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Flex Example with Overrides</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="flex flex-col items-center justify-around flex-wrap">
        <div class="p-4 bg-red-500 flex-grow">Item 1</div>
        <div class="p-4 bg-blue-500 flex-grow">Item 2</div>
        <div class="p-4 bg-green-500 flex-grow">Item 3</div>
    </div>
</body>
</html>

Summary​

  • Tailwind CSS applies the same default flexbox properties as normal CSS when you set a parent element to display: flex using the flex class.
  • You do not need to explicitly define these default values in your Tailwind CSS classes.
  • Tailwind CSS provides utility classes to override these defaults easily if needed.