CODEWITHSUNDEEP
htmlcsssvginline
Martin WasGehtSieDasAn
Martin WasGehtSieDasAn

Reputation: 305

HTML <span> and svg element are not inline

My current situation is a fieldset that is inline with another one on my page. The fieldset this post is about contains a svg circle and some text.

My goal is to have both of these inline to each other, with the fieldset adapting in size because i want to change the given <span>/<p> text and the color of the circle later on based on a function that returns either true or false.

My current code is this: 

<div>
  <fieldset class="fieldset-auto-width">
    <legend>some legend</legend>
    <div>
      <svg height="32" width="32"><circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/></svg>
    </div>
    <span>some text</span>
  </fieldset>
</div>

JS-Fiddle to my code with CSS

At this point i am not even sure if the second div that wraps the svg element is needed, because im trying to get it right for about half an hour now. The nested dif was there because i tried to force a maximum size to the svg element because of the unwanted space it took, even with style="display: block"

Now i want my svg circle and my <span> inline.

The reason why i am currently using <span> and not <p> is because there is too much unwanted space below the svg, which is not as critical when using <span> instead of <p>.

Edit: wrong jsfiddle link

Upvotes: 3

Views: 6913

Answers (3)

Jinu Kurian
Jinu Kurian

Reputation: 9416

Here you go. div is a block element. So, you have to make it inline-block. vertical-align: middle sets the vertical alignment of an element

<div>
	<fieldset class="fieldset-auto-width" >
		<legend>some legend</legend>
			<div style="display: inline-block; vertical-align: middle">
				<svg height="32" width="32">
					<circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/>
				</svg>
			</div> 	
		<span>some text</span>
	</fieldset>
</div>

Upvotes: 3

webdev_be
webdev_be

Reputation: 53

Not sure if I understand your question entirely but your span element is not in the same container as the SVG. Since you've set your SVG element to display inline-block, this has no effect to your span.

To align these two vertically, you can use vertical-align: middle on both your elements (svg and span) and set your SVG to display:inline-block

Updated fiddle : https://jsfiddle.net/L70oupcp/5/

      <div>
        <svg height="32" width="32">
           <circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/>
        </svg>
        <span>some text</span>
      </div>

Upvotes: 2

Quentin
Quentin

Reputation: 943645

A <div> is display: block by default.

If you want the content of the div and the element following the div to be inline with each other … don't put a div there.

<div>
	<fieldset class="fieldset-auto-width" >
		<legend>some legend</legend>
				<svg height="32" width="32">
					<circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/>
				</svg>
		<span>some text</span>
	</fieldset>
</div>

Upvotes: 1

Related Questions