How can I stack two arrow images (upvote/downvote) on top of eachother using CSS ?

Last Updated : 07 Jun, 2022

CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.

In this article, we will learn about how can I stack two arrow images (upvote/downvote) on top of each other using CSS.

Properties used:

display: This property is used to specify the display behavior (the type of rendering box) of an element.
float: This property is used to specify whether an element should float to the left, right, or not at all.
clear: This property is used to control the flow next to floated elements.

Example: In this article, we will see how we can stack two arrow images (upvote/downvote).

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        stack two arrow images (upvote/downvote) on top of eachother 
    </title> 
    <style> 
          
        img 
        { 
            width:150px; 
            margin-left:20px; 
        } 
        .vote 
        { 
            float: left; 
            clear: left; 
        } 
  
        .gfg img 
        { 
            display: block; 
            float: none;  
            clear: both; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
  
    <div class="gfg"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220529211152/up-300x300.png" /> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220529211152/down-300x300.png" /> 
    </div> 
</body> 
</html> 