CSS INLINE-BLOCK

rainbow baker

 CSS INLINE-BLOCK

  • Compared to display:inline, the major difference is that display: inline-blockallows to set a width and height on the element.
  • Display:inline blockthe top and bottom margins/paddings are respected, but with display:inlineblock, they are not.
  • Compared to display:block, the major difference is that display:inline-block does not add a line-break after the element, so the element can sit next to other elements.

SYNTAX

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

EXAMPLE

<!DOCTYPE html>

<html>

<head>

<style>

.nav {

  background-color: yellow; 

  list-style-type: none;

  text-align: center;

  margin: 0;

  padding: 0;

}

.nav li {

  display: inline-block;

  font-size: 20px;

  padding: 20px;

}

</style>

</head>

<body>

<h1>Horizontal Navigation Links</h1>

<p>By default, list items are displayed vertically. In this example we use display: inline-block to display them horizontally (side by side).</p>

<p>Note: If you resize the browser window, the links will automatically break when it becomes too crowded.</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>

</body>

</html>

OUTPUT






Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send