Home HTML CSS JAVASCRIPT BOOTSTRAP Python Docker ML tutorial ☰ About us Privacy policy

Inline block elements in html


inline-block in css:-


Compare to display: inline and inline-block the major difference is that display: inline-block allows to set a width and height on the elements in html page.

the main difference is that display: inline-block is does not add line-break after the element, so the element can set next to other elements in html.


<style>
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;  
  background-color: red; 
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: blue; 
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: pink; 
}
</style>


<h1>The display Property</h1>

<h2>display: inline code fmaily</h2>
<div><li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li>
<li>Code family</li> <span class="a">Code family</span> <span class="a">Code family</span>
<li>Code family</li>
<li>Code family</li> </div>

<h2>display: inline-block with code family</h2>
<div>we are code fmaily, <span class="b">code</span> <span class="b">family</span>,welcome code family </div>

<h2>display: block with code family</h2>
<div>we are code family<span class="c">code</span> <span class="c">family</span> code family, </div>


inline-block to Create Navigation in HTML page ;-

One common use for display: inline-block is to create menu in HTML page

<style>
.nav {
  background: red; 
  list-style-type: none;
  text-align: center;
 
  margin: 0;
  padding: 0;
}
.nav li a{
  color:white;
    text-decoration:none;
    padding:10px;
}

.nav li a:hover{
  background: white;
    color:black;
    border-radius:20px;
   
}
.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}
</style>
<h1>Horizontal Navigation menu with code family</h1>
<p>code family.</p>
<p>code family.</p>

<ul class="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#clients">Our Clients</a></li>  
  <li><a href="#contact">Contact Us</a></li>
</ul>



More Topics