The SVG is floating away from its anchor container

Is there a way to adjust the size of the <a> tag so that it can fully contain the SVG icon? And also, how can I remove the underlined area of the <a> element? Click here for an illustration

a {
  background-color: rgba(42, 165, 42, 0.596);
  text-decoration: none;
  display: inline-block;
}

svg {
  background-color: rgba(165, 42, 42, 0.596);
  height: 50px
}
<a href="#">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28">
        <path
          d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s-3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"
        />
      </svg>
</a>

htmlcsscontainersoverflowanchor

Answer №1

The SVG icon is 50px X 50px, but when placed inside an a element which is typically inline, it creates additional space.
Similar to how text, also an inline element, adds space above and below.
This leads the browser to interpret that the svg within the a is also inline and adds space.
To ensure the width and height of the a element match the svg:

  • Add display: inline-flex to the parent's(a) CSS
  • Add display: inline-table to the child's(svg) CSS

Example snippet

a {
  background-color: rgba(42, 165, 42, 0.596);
  text-decoration: none;
  display: inline-flex;
}

svg {
  background-color: rgba(165, 42, 42, 0.596);
  height: 50px;
  display: inline-table;
}
<a href="#">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28">
        <path
          d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A...
</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

transferring color values from C# to ASPX style class

In my .NET C# project, I am trying to pass a color value from my C# code to an ASP.NET style class. The CSS for my class is as follows: <style> div.timeline-event { color: #1A1A1A; border-color: green; background-color:#EFD5F6; display: inline-block ...

c#asp.netcss

Click the link to copy it and then paste the hyperlink

I am facing an issue with copying and pasting file names as hyperlinks. I have checkboxes next to multiple files and a share button. When I check the boxes and click on the share button, I want to copy the download URLs for those files. Although I can succ ...

javascripthtmlangulartypescript

Ensure the width of an HTML table by using only the <td witdth> tag

How can I set a fixed width for each column in my HTML table without using the width property in CSS? The current code is not displaying the table properly, with it only rendering at 100% width of the screen. Here's a snippet of the relevant code: ...

htmlcss

"Enhance Your Angular 6 Project with a Stunning jQuery Lightbox

Looking to incorporate jquery simple lightbox into my app, however I am encountering an issue. When I hardcode the image links, everything works fine - images are displayed from both external links and local folder. But when I try to use *ngFor directive t ...

jqueryangularhtml

What is the best way to format MySQL table data into rows and columns for display?

<?php mysql_connect('server', 'user', 'Pass'); mysql_select_db('add'); $query =mysql_query('select * from addimage'); while( $row = mysql_fetch_assoc($query) ) { echo "$row[url]"; } ?> This code ...

phpmysqlhtml

Retrieve all parent elements from a document using Nokogiri

I have a document structured as follows: <DL><a lot of tags>...<H3>Entry 1</H3><a lot of tags>...</DL> <DL><a lot of tags>...<H3>Entry 2</H3><a lot of tags>... <DL><a lot of ta ...

htmlrubyxmlnokogiri

Include a hyperlink that is activated when hovering over an image

UPDATE: I am amazed by the quick responses, this is my first time using this platform. Thank you to everyone who helped out. The person who provided the answer understood exactly what I was looking for. To others who responded, thank you as well. I need h ...

javascripthtmlcss

tips for ensuring uniform height on responsive thumbnails

Can someone help me figure out why this code isn't working on my page? var gallery = $('.photos').gallerify({ margin:10, mode:{ maxHeight: screen.height * 0.5, breakPoints:[ { minWidth: 1170, columns: 4, }, { minWidth: 970, col ...

jqueryhtmlcssimageresponsive-design

Is there a way to include a top offset on a scrollbar without relying on javascript?

How can I add some space between the top of the viewport and the top-tip of the scrollbar using CSS? I am working on a Google map with an InfoWindow (using the InfoBox extension) and when the scrollbar appears, the "x" close button overlaps the scrollbar ...

htmlcssscrollbar

Can we enclose a div within a bootstrap row, but not as a grid item

Can a div be wrapped inside a row without using column classes? While it is technically possible, some may argue that it is not the best practice. Let's explore this further. Take a look at the example below: <div class="row"> <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4

Generate the stored image data onto an HTML 5 canvas

I have been diving into the world of HTML5, exploring how to create and draw shapes in canvas and save them in a MySQL database for later restoration within the canvas itself. During my research, I came across this helpful tutorial. After successfully sa ...

htmlhtml5-canvashtml5-appcache

Transmitting an array of HTML form data to JSP/Servlet

My background is in PHP, where form data with names ending in square brackets are automatically interpreted as arrays. For example: <input type="text" name="car[0]" /> <input type="text" name="car[1]" /> <input type="text" name="car[3]" /&g ...

htmlarraysformsjspservlets

Struggling with React Js and need some assistance?

I'm completely new to React Js and encountering issues with my code. Here's what I have: Here is the content of my script file named Main.jsx. This file gets compiled by React, and the output is stored in main.js under the 'dist' folde ...

javascripthtmlreactjsdomjsx

Tips for utilizing the grid system in Bootstrap 4 to transform a dropdown menu into the desired shape shown in the image

I am struggling to create a dropdown menu similar to the one highlighted with a red border in the image, The screenshot I referenced is from the bootswatch website (a bootstrap theme). Although I attempted to use bootstrap flex utility, I was unable to a ...

htmlcssbootstrap-4

Switching the Focus in Laravel Layouts

My understanding of CSS media queries includes: @media screen and (orientation: portrait) { div.container { ... } } @media screen and (orientation: landscape) { div.container { ... } } Despite this knowledge, I am looking ...

htmlcssbootstrap-4laravel-blade

`Implementing a dynamic list with image and button using Bootstrap 5`

I've been exploring ways to create a container with 4 images aligned next to each other, accompanied by a button beneath each image. My goal is for the layout to be responsive, meaning that as the screen size adjusts, the elements inside should also a ...

htmlcssimagebootstrap-5

Do not manipulate HTML tags using sed command

There are numerous guides available demonstrating how to utilize sed for modifying/removing HTML tags, and most of them typically suggest something along the lines of... sed 's/<[^>]\+>//g' However, what I am seeking is the opposi ...

htmlsed

The function 'myfunc' was called within a render, however, it is not defined in the instance

I keep seeing this error message Property 'myfunc' was accessed during render but is not defined on instance, and I'm not sure why. Below are my HTML and JavaScript code snippets. const ListRenderingApp = { data() { return { todo ...

javascripthtmlvue.jsvuejs2vue-directives

Unable to cycle through an array of objects in JavaScript. Only receiving output for the initial element

var people = new Array(); var individual = { first_name: "Padma", identification_number: 1, region: "India" }; people.push(individual); people.push([individual = { first_name: "Balaji", identification_number: 3, region: "India" }]); people. ...

javascripthtmljquery

Unable to find the XPATH element with Selenium in Python due to element not being located

Can anyone help me troubleshoot? My XPATH seems correct, but it's showing 'no element found' error. I also attempted using find_elements(By.XPATH, "/html/body/div[3]/div[3]/div[5]/div[1]/table[*]/tbody/tr[*]/td[1]/a") import time from selen ...

htmlcssseleniumselenium-webdriverxpath