Semantic-UI Image Spaced Variations

Last Updated : 10 Mar, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

There are different styles of putting images on our website using semantic-ui that make our website look more awesome. Semantic-UI Image Spaced Variations are used to specify that it needs an additional spacing to separate it from nearby content.

Semantic UI image spaced variation class:

spaced: It is used to add additional spacing to separate it from nearby content.

Syntax:

<div class="ui segment">
  <p>Content <img class="ui spaced image" src="..."> ...</p>
</div>

Example 1: In this example, we will describe the Semantic-UI Image Spaced Variations.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Image Spaced Variations
    </title>
 
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
 
<body>
    <div class="ui center aligned container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
 
        <h3>Semantic-UI Image Spaced Variations</h3>
    </div>
 
    <div class="ui segment container">
         
<p>
            Web Technology <img class="ui mini spaced image"
src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
            refers to the various tools and
            techniques that are utilized in the process of
            communication between different types of devices
            over the internet. A web browser is used to
            access web pages. Web browsers can be defined
            as programs that display text, data, pictures,
            animation, and video on the Internet.
            Hyperlinked resources on the World Wide Web
            can be accessed using software interfaces
            provided by Web browsers.
        </p>
 
    </div>
</body>
 
</html>

Output:

Example 2: In this example, we will describe the Semantic-UI Image Spaced Variations with size variation.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Image Spaced Variations
    </title>
 
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
 
<body>
    <div class="ui center aligned container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
 
        <h3>Semantic-UI Image Spaced Variations</h3>
    </div>
 
    <div class="ui segment container">
         
<p>
            Web Technology <img class="ui mini spaced image"
src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
            refers to the various tools and
            techniques that are utilized in the process of
            communication between different types of devices
            over the internet. A web browser is used to
            access web pages. Web browsers can be defined
            as programs that display text, data, pictures,
            animation, and video on the Internet. 
            <img class="ui small circular spaced image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
            Hyperlinked resources on the World Wide Web
            can be accessed using software interfaces
            provided by Web browsers.
        </p>
 
    </div>
</body>
 
</html>