CSS Display:inline VS block
display:inline
This is default.The element will be displayed inline, inside the current block on the same line.
An inline element has no line break before or after the element.
Example
<html>
<head>
<style type="text/css">
</head>
<body>
<ul>
</body>
</html>
<head>
<style type="text/css">
li
{
display:inline;
list-style-type:none;
}
</style>{
display:inline;
list-style-type:none;
}
</head>
<body>
<ul>
<li><a href="#">CCNA</a></li>
<li><a href="#">Subnet</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
</ul><li><a href="#">Subnet</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
</body>
</html>
Output
CCNA Subnet JavaScript PHP
display:block
The element will be displayed as a block like paragraphs and headers.Block element uses the total width and create a break before or after the element.
Example
<html>
<head>
<style type="text/css">
</head>
<body>
<ul>
</body>
</html>
<head>
<style type="text/css">
li
{
display:block;
list-style-type:none;
}
</style>{
display:block;
list-style-type:none;
}
</head>
<body>
<ul>
<li><a href="#">CCNA</a></li>
<li><a href="#">Subnet</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
</ul><li><a href="#">Subnet</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
</body>
</html>
Output
CCNASubnet
JavaScript
PHP
No comments:
Post a Comment