DEV Community

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

Posted on • Edited 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)