medium

CSS Medium

Explain Inline, Block and Inline Block property in CSS?

The display property in CSS (Cascading Style Sheets) specifies how an HTML element shows on a webpage. The display property has three common values: inline, block, and inline-block. Let's discuss each of them:

1. Inline:

When an element has display:inline;, it looks on the same line as the content around it. The width and height features have no effect on them, so they simply cover the correct range of width.
Examples of inline elements include

<span
  >,
  <a
    >,
    <strong
      >, <em>, and <img /> </em>
    </strong>
  </a>
</span>

CSS Declaration:

selector {
  display: inline;
}

span {
  display: inline;
}

Block:

When an element has display: block; used it displays on a new line and fills the available width. Block-level features can have all height and width attributes applied to them.

Examples of block elements include

<div>
  ,
  <p>,</p>
  <h1>
    to
    <h6>
      ,
      <ul>
        ,
        <ol>
          , and
          <li>.</li>
        </ol>
      </ul>
    </h6>
  </h1>
</div>

CSS Declaration:

selector {
  display: block;
}

div {
  display: block;
}

Inline-Block:

Elements with display: inline-block; can have a width and height specified, but they normally display on the same line as the content above them. It allows them to remain a part of the inline content flow while having block-level attributes.
When you want an element to be visibly inline but also need to apply block-level values, like width or height, this is a helpful tool.
Examples of inline-block elements are often
```
<img class="inline-block" src="example.jpg" alt="Example Image" />
```
elements when you want them to align horizontally with text.
CSS Declaration:

selector {
  display: inline-block;
}

img {
  display: block;
}

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .inline-example {
        display: inline;
        border: 1px solid red;
        padding: 5px;
      }

      .block-example {
        display: block;
        border: 1px solid blue;
        padding: 10px;
      }

      .inline-block-example {
        display: inline-block;
        border: 1px solid green;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <span class="inline-example">Inline</span>
    <div class="block-example">Block</div>
    <div class="inline-block-example">Inline-Block</div>
  </body>
</html>
/>

In this example, you can observe how each element behaves based on its display property. The inline element (span) only takes up as much space as necessary, the block element (div) takes up the full width, and the inline-block element (div) flows inline but can have dimensions and spacing.

What is used of media query ?

The Media query in CSS is used to create a responsive web design. It means that the view of a web page differs from system to system based on screen or media types.Device breakpoints are points where a webpage's design adjusts for different devices, like phones, tablets, and desktops.

Here's a basic example of using media queries with device breakpoints in CSS:

Small mobile device : less than 600px
Normal mobile device : greater than 600px and less than 768px
Tablets : greater than 768px and less than 992px
Laptops / desktops : greater than 992px and less than 1200px
TV/Large desktop : greater than 1200px

max-width:- The max-width are specifies the maximum width of a particular device.
Syntax:-

@media screen and (max-width: 600px) { }

min-width:-The min-width are specifies the minimum width of a particular device.
Syntax:-

@media screen and (min-width: 600px) { }

min-width and max-width at same time
Syntax:-

@media screen and (min-width: 600px) and (max-width: 800px) { }

For example :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .btn {
        background-color: black;
        color: white;
        width: 300px;
        height: 80px;
        font-size: 40px;
      }
      /* Mobile Devices */

      @media screen and (min-width: 600px) and (max-width: 768px) {
        .btn {
          background-color: blue;
          font-size: 20px;
        }
      }

      /* Tablet Devices */

      @media screen and (min-width: 769px) and (max-width: 992px) {
        .btn {
          background-color: pink;
          color: black;
        }
      }

      /* Dekstop device */

      @media screen and (min-width: 993px) and (max-width: 1200px) {
        .btn {
          background-color: red;
        }
      }
    </style>
  </head>

  <body>
    <button class="btn">Button</button>
  </body>
</html>

CSS Medium​

CSS Medium