Why isn't this span holding these SVG elements?

Question

I have 3 SVG elements that I plucked from material design.

I wrapped them in a span that I wanted to use to hold them in a box for a clean UI.

However, when I start developing the idea, I see immediately that the SVG elements are not even located with in the span.

However, they are child element of the containing span as seen in the code below.

I find this perplexing and was hoping there was an easy fix.

<style>
  #container {
    border: 1px solid #000000;
  }
  .svg{
    border: 1px solid #0000ff;
    margin: 20px;
  }
</style>

<span id='container'>
  <svg class='svg' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="none" d="M0 0h24v24H0V0z"/>
    <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3v-3h18v3z"/>
  </svg>
  <svg class='svg' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
  </svg>
  <svg class='svg' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg>
</span>

How can I make a simple fiddle embedded in SO like I see many people do for the code above? — , Jun 21 '19 at 23:24
I made an external fiddle here - https://jsfiddle.net/xLgvo9y7/ — , Jun 21 '19 at 23:26
This works, but can you tell me why so I know in the future why my parent div does not want to wrap its children. What is the "law" or "rule" governing this? Thanks again. — , Jun 21 '19 at 23:31
the duplicate deals with `a` and image but it's the same since `span` is like `a` and SVG like image — Temani Afif, Jun 21 '19 at 23:40

score 0 · Answer 1 · answered Jun 21 '19 at 23:26

This is due to the default display: inline of the span. Adding display: inline-block; to #container does the trick.

jsfiddle

#container {
 border: 1px solid #000000;
 display: inline-block;
}
.svg {
 border: 1px solid #0000ff;
 margin: 20px;
}

<span id='container'>
 <svg class='svg' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="none" d="M0 0h24v24H0V0z"/>
  <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3v-3h18v3z"/>
 </svg>
 <svg class='svg' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
 </svg>
 <svg class='svg' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
  <path d="M0 0h24v24H0z" fill="none"/>
 </svg>
</span>

works like magic, but can you tell me why I need to change the display to inline-block. — , Jun 21 '19 at 23:30
This works, but can you tell me why so I know in the future why my parent div does not want to wrap its children. What is the "law" or "rule" governing this? Thanks again. — , Jun 21 '19 at 23:31
This is a pretty common gotcha but is not very well documented. I believe [this article](https://css-tricks.com/almanac/properties/d/display/#inline) is the closest I can find to a good source for this behaviour when mentioning "Margin and padding will only push other elements horizontally away, not vertically" — Bali Balo, Jun 21 '19 at 23:41
Oh, it looks like the question marked as duplicate has an answer with better sources than that. — Bali Balo, Jun 21 '19 at 23:42

Why isn't this span holding these SVG elements?

1 Answers1