DEV Community

Cover image for Day 54 of #100DaysOfCode: Review CSS- display
Jen-Hsuan Hsieh
Jen-Hsuan Hsieh

Posted on

Day 54 of #100DaysOfCode: Review CSS- display

#100daysofcode #css #display #webdev

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!

Top comments (0)

Read next

oyegoke profile image

High-level workflow in MERN apps

Opajobi Oyegoke -

abhinav707 profile image

Building a Scalable Slot Booking System with Redis Distributed Locks

Abhinav -

prince_beec5ccde00b7c6c73 profile image

Logo's designing effect in html css

Prince -

56_kode profile image

Taming Long Text: The Art of Truncation with CSS

56kode -