CODEWITHSUNDEEP
htmlcsssvg
codechick
codechick

Reputation: 41

Create space between two stacked svg images

I'm adding two SVG images to an existing HTML page that includes existing CSS modules.

I can only add them using the {% includes ……..%} statement if it’s in the folder structure below: enter image description here

The SVG images will not add to the existing HTML using the imgtags per the code below:

<img class="step-img" src="./_includes/svg/icon-comm-of-prac-discu.svg" alt="" />

In addition, I'm positioning them using an existing CSS module named "project-position-2" that has this code:

 .project-position-2 {
  text-align: center;
  }

Here is the HTML code to add both svg images and a live screenshot of what they look like:

<div class="project-position-2">
<img class="step-img" src="./_includes/svg/icon-comm-of-prac-discu.svg" alt="" />
{% include svg/icon-comm-of-prac-discu.svg %}
<div class="project-position-2">
{% include svg/join-comm-of-prac.svg %}`
</div>
</div>

enter image description here

I have tried adding padding and margins to the existing CSS, within the HTML and to the SVG image attributes and none of them are taking effect in putting space between the top and bottom of the SVG's.

Upvotes: 2

Views: 540

Answers (1)

Uttam
Uttam

Reputation: 776

  1. In HTML you can add couple of new lines by < br> tag.

  2. In CSS it can be done by selecting your class and applying padding(if the div only contains the image) eg code:- .project-position-2 { padding-top : 5%; padding-bottom : 5%; }

    Or

    you can apply margin too eg code:- .project-position-2 { margin-top: 15px; margin-bottom : 15px; }

Upvotes: 1

Related Questions