DEV Community

loading...
Cover image for Day 54 of #100DaysOfCode: Review CSS- display

Day 54 of #100DaysOfCode: Review CSS- display

jenhsuan profile image Jen-Hsuan Hsieh ・2 min read

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

  1. Everything is respected
  2. The elements don’t sit side by side

Demo

Code

<div class="outer">
  <span class="inner">
    inner
  </span>
  <span class="inner">
    inner
  </span>
</div>
Enter fullscreen mode Exit fullscreen mode
.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%;
}
Enter fullscreen mode Exit fullscreen mode

2. display: inline

Properties

  1. Width and height are not respected
  2. Top and bottom margins are not respected

Demo

Code

<div class="outer">
  <span class="inner">
    inner
  </span>
  <span class="inner">
    inner
  </span>
</div>
Enter fullscreen mode Exit fullscreen mode
.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%;
}
Enter fullscreen mode Exit fullscreen mode

3. display: inline-block

Properties

  1. Width and height are respected
  2. Top and bottom margins are respected
  3. The elements sit side by side

Demo

Code

<div class="outer">
  <span class="inner">
    inner
  </span>
  <span class="inner">
    inner
  </span>
</div>
Enter fullscreen mode Exit fullscreen mode
.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%;
}
Enter fullscreen mode Exit fullscreen mode

That's it!

Articles

There are some of my articles. Feel free to check if you like!

Discussion (0)

pic
Editor guide