Introduction
The Review CSS series is the note for some common CSS usages. Three are three types of CSS position: block, inline, inline-block.
1. display: block
Properties
- Everything is respected
- The elements don’t sit side by side
Demo
Code
<div class="outer">
<span class="inner">
inner
</span>
<span class="inner">
inner
</span>
</div>
.outer {
position:relative;
color:green;
border: 3px solid green;
height: 400px;
width: 500px;
}
.inner {
display:block;
padding:2%;
margin: 2%;
color: blue;
border: 3px solid blue;
text-align:center;
font-size: 30px;
height: 100px;
width: 200px;
top:50%;
}
2. display: inline
Properties
- Width and height are not respected
- Top and bottom margins are not respected
Demo
Code
<div class="outer">
<span class="inner">
inner
</span>
<span class="inner">
inner
</span>
</div>
.outer {
position:relative;
color:green;
border: 3px solid green;
height: 400px;
width: 500px;
}
.inner {
display:inline;
padding:2%;
margin: 2%;
color: blue;
border: 3px solid blue;
text-align:center;
font-size: 30px;
height: 100px;
width: 200px;
top:50%;
}
3. display: inline-block
Properties
- Width and height are respected
- Top and bottom margins are respected
- The elements sit side by side
Demo
Code
<div class="outer">
<span class="inner">
inner
</span>
<span class="inner">
inner
</span>
</div>
.outer {
position:relative;
color:green;
border: 3px solid green;
height: 400px;
width: 500px;
}
.inner {
display:inline-block;
padding:2%;
margin: 2%;
color: blue;
border: 3px solid blue;
text-align:center;
font-size: 30px;
height: 100px;
width: 200px;
top:50%;
}
That's it!
Articles
There are some of my articles. Feel free to check if you like!
- My blog-posts for software developing: https://medium.com/a-layman
- My web resume: https://jenhsuan.github.io/ALayman/cover.html
- Facebook page: https://www.facebook.com/imalayman
- My latest side project - Daily Learning: https://daily-learning.herokuapp.com/
Top comments (0)