Reputation: 41
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:
The SVG images will not add to the existing HTML using the img
tags 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>
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
Reputation: 776
In HTML
you can add couple of new lines by < br> tag.
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