Back ArrowExplore all kits

Block and Inline Display values

share link

by vigneshchennai74 dot icon Updated: Mar 30, 2023

technology logo
technology logo

Guide Kit Guide Kit  

Block and inline display values can be applied to HTML elements using CSS. These values determine how the element is visually displayed on the webpage.


Block-level elements are commonly used for larger sections of content. Block-level elements occupy the entire width of their parent container and create a new line after the element. Examples of block-level elements include headings (h1, h2, h3, etc.), paragraphs (p), and divs.


Inline-level elements are used for smaller content. It should be displayed within a larger block-level element. But, inline-level elements only occupy the necessary width to display their content and do not create a new line after the element. Examples of inline-level elements include spans, images (img), and links (a). Understanding and utilizing the block & inline display values can help create appealing and sound web pages. By defining these values, developers can ensure that their content is organized. And logically pleasing and create a better user experience for their visitors.

Preview of the output that you will get on running this code from your IDE

Code

display inline block not working

HTMLdotLines of Code : 61dotLicense : Strong Copyleft (CC BY-SA 4.0)

header{
    margin: 2%;
    background: url('../images/bg.jpg') no-repeat;
    background-size: cover;
    color: #fff;
}
.head{
    background-color: rgba(0,0,0,0.6);
}
.resume div{
    display: inline-block;
}
.resume-logo img{
    height: 40px;
}
.header-main .header-left, .header-right, .header-left div, .header-right div{
    display: inline;
}
.header-left{
    box-shadow: 0 0 10px -3px #2e3d42;
}
.header-left-img{
    background: url('../images/me.jpg') no-repeat;
    background-size: contain;
    height: 263px;
    width: 263px;
}
<body>
  <header>
    <div class="head">
      <div class="container">
        <div class="resume">
          <div class="resume-logo">
            <span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIMSURBVGhD7dm/S1VhHMfxG0KlSVGBSENhtEQkRQQNBkU2FiG1tIUo9Gc0CIGL0VJDOIhEDQ0ViDXkUFBQQ0uI4NYUFEEEhWa9P+IXvhzOPVwPz/N4zecDLy73PA+c87lwnvPjNnI2UfbgbxuZRq38d0W+r37buFxHLqJsySI71j5jJEmRS/iKX7iNboROkiJz0Bwziqrswt4K2mcxSYq8hi8ygmY5gyX4+WXG4ZOkyBv4g9BOm+UoFvCtwhfchE+SIvr1rIR+7eMInSRF9uMzNO+uNkRIkiLKDDTv8uq36vTgcIWD2Aaf6EV6cQu/oXmfMIQOlGUAf6C5VSbgE7XIMH7AH4D5gD4UcwQfsVhBi8EN+EQrsh3zKDsQM4ZQSXaOxE4uYslFAicXsWyJIroKn6rhJHbCRzeTNn4CWt59ohXRjpehsToewaLbmuL4PfhEK6Ltz/G+hnfwV25d7V/Bxt/iGnzyOWLJRQInapF+DLboPHajWfQsb3PPoQs+0Yocwwo01qpnKMsVFOc+gE+0Inql8xAvW/QCOpiyHMJT2NxZ6F2ZTz5HLLlI4EQtchp+ZVqPfbDojclZ2NgFaL8+0Ypo6dX2up7AchXF8Un4RCuiVes+Htfk338dwBRsTDeUF+GTzxFLLhI4uYglFwmcYEV+Qo+fG+UOghRpF7WLdEIXvnahvzJyNkkajX/MPPOkjUNuHwAAAABJRU5ErkJggg=="></span>
          </div>
          <div class="resume-text">
            Resume
          </div>
        </div>
        <div class="container header-main">
          <div class="header-left">
            <div class="header-left-img"></div>
            <div class="header-left-bottom">
              <span class="name">I'm</span>&nbsp;<span>Vishal Mehra</span>
            </div>
          </div>
          <div class="header-right">
            <div class="hello">Hello!</div>
            <div class="header-right-middle">
              I'm <span class="about">19</span>. I live in <span class="about">Uttarakhand, India</span>
            </div>
            <div class="header-right-bottom">
              A beginner in building Software Applications, interested in becoming a Software Developer. Seeking for an opportunity to work in a challenging environment to prove my skills and utilize my knowledge &amp; intelligence in the growth of the organization.
              And also &#34;A Tech Enthusiast&#34;
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</body>

Instructions

  1. Download and install VS Code on your desktop.
  2. Open VS Code and create a new file in the editor.
  3. Copy the code snippet that you want to run, using the "Copy" button or by selecting the text and using the copy command (Ctrl+C on Windows/Linux or Cmd+C on Mac).Copy HTML tags in html file, CSS you can add in a separate file and then link to HTML file using the <link> tag.
  4. Paste the code into your file in VS Code, and save the file with a meaningful name and the appropriate file extension (.html for HTML, .js for JavaScript, etc.).
  5. To run the code, open the file in VS Code and click the "Run" button in the top menu, or use the keyboard shortcut Ctrl+Alt+N (on Windows and Linux) or Cmd+Alt+N (on Mac). The output of your code will appear in the VS Code output console.



I hope you found this useful. I have added the version information in the following sections.


I found this code snippet by searching for " display inline block not working "in kandi. You can try any such use case!

Environment Tested

Tested this solution in the following versions. Be mindful of changes when working with other versions.

  • Visual Studio Code Version 1.76.0


Understanding and utilizing block and inline display values can help in creating visually appealing and structurally sound webpages. This process also facilities an easy to use, hassle free method to create a hands-on working version of code which would help us an display inline block in Html

Support

  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page


Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow

  • © 2023 Open Weaver Inc.