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

dionarodrigues profile image

Docker compose, orchestrating and automating services

Diona Rodrigues -

davidepassafaro profile image

Angular HostAttributeToken: the new way to inject attributes

Davide Passafaro -

piotrkulpinski profile image

How to Build Dynamic Breadcrumbs in Remix

Piotr Kulpinski -

altay profile image

Chrome DevTools: CSS Overview Panel

Altay Karakuş -