I am explaining you, how to use Inline & Inline-block display in CSS. display properly define how the components are going to be place/show.
Syntax :
display: value; //inline
//inline-block
Inline-block
display an element as an inline-level block container. in inline-block the top and bottom margins/paddings are respected. you can set height and width values of block.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webdeveloperindia.in Inline & Inline-block css</title>
<style>
html, body {
margin: 5px;
padding: 5px;
}
.menu_box{
background-color: green;
list-style-type: none;
text-align: center;
}
.menu_box li {
display: inline-block;
padding: 10px;
font-size: 25px;
}
span.spacing {
width: 200px;
display: inline-block;
background-color:#ddd;
height: 50px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Webdeveloperindia.in Menu Bar with inline-block css</h1>
<ul class="menu_box">
<li>Home</li>
<li>About Us</li>
<li>History</li>
<li>Sale</li>
<li>Offer</li>
<li>Packages</li>
<li>Contact</li>
</ul>
<p>Hello, this is simple example that showing inline-block css <span class="spacing">Testing Content</span></p>
</body>
</html>
Output :
inline
It is used to display an element as an inline element. any height and width properties will have no effect on property value.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webdeveloperindia.in Inline & Inline-block css</title>
<style>
html, body {
margin: 5px;
padding: 5px;
}
.menu_box{
list-style-type: none;
background-color: green;
}
.menu_box li {
display: inline;
padding: 10px;
font-size: 25px;
}
span.spacing {
width: 200px;
padding: 5px;
display: inline;
background-color: #ddd;
height: 50px;
}
</style>
</head>
<body>
<h1>Webdeveloperindia.in Menu Bar with inline css</h1>
<ul class="menu_box">
<li>Home</li>
<li>About Us</li>
<li>History</li>
<li>Sale</li>
<li>Offer</li>
<li>Packages</li>
<li>Contact</li>
</ul>
<p>Hello, this is simple example that showing inline css <span class="spacing">Testing Content</span></p>
</body>
</html>
Output :
Hello, Welcome to webdeveloperindia.in. I am a full-stack web developer. Email – [email protected] | Skype – azaruddin23. I have knowledge of PHP, Laravel, Magento 1/2, Codeigniter, WordPress, Joomla, Shopify, Git, Bitbuket, jQuery, Ajax, Javascript and ReactJS.
It is a nice tutorial of css very informative.