avatar uses image spacing

server/documents/elements/image.html.eco

@@ -81,19 +81,21 @@ type        : 'UI Element'
   <div class="example">
     <h4 class="ui header">Sizes</h4>
     <p>An image may be formatted to be different sizes</p>
-    <img class="ui tiny image" src="/images/demo/photo2.jpg">
-
-    <div class="ui simple ignored divider"></div>
-    <img class="ui mini image" src="/images/demo/photo2.jpg">
-
-    <div class="ui simple ignored divider"></div>
-    <img class="ui small image" src="/images/demo/photo2.jpg">
-
-    <div class="ui simple ignored divider"></div>
-    <img class="ui large image" src="/images/demo/photo.jpg">
-
-    <div class="ui simple ignored divider"></div>
-    <img class="ui huge image" src="/images/demo/photo.jpg">
+    <img class="ui mini image" src="/images/demo/highres3.jpg">
+    <div class="ui ignored divider"></div>
+    <img class="ui tiny image" src="/images/demo/highres3.jpg">
+    <div class="ui ignored divider"></div>
+    <img class="ui small image" src="/images/demo/highres3.jpg">
+    <div class="ui ignored divider"></div>
+    <img class="ui medium image" src="/images/demo/highres3.jpg">
+    <div class="ui ignored divider"></div>
+    <img class="ui large image" src="/images/demo/highres3.jpg">
+    <div class="ui ignored divider"></div>
+    <img class="ui big image" src="/images/demo/highres3.jpg">
+    <div class="ui ignored divider"></div>
+    <img class="ui huge image" src="/images/demo/highres3.jpg">
+    <div class="ui ignored divider"></div>
+    <img class="ui massive image" src="/images/demo/highres3.jpg">
   </div>
 
 

server/documents/elements/segment.html.eco

@@ -172,7 +172,7 @@ type        : 'UI Element'
     </div>
   </div>
 
-  <div class="example">
+  <div class="clearing example">
     <h4 class="ui header">Floated</h4>
     <p>A segment cant sit to the left or right of other content</p>
     <div class="ui right floated segment">

server/files/stylesheets/semantic.css

@@ -1032,6 +1032,9 @@ body.guide .main.container > * {
 #example .no.example i.code {
   display: none;
 }
+#example .clearing.example {
+  overflow: hidden;
+}
 
 #example .example:first-child,
 #example h2 + .example,

src/elements/image.less

@@ -140,7 +140,7 @@ img.ui.image {
 .ui.avatar.images img,
 .ui.avatar.image img,
 .ui.avatar.image {
-  margin-right: 0.5em;
+  margin-right: @imageSpacing;
 
   display: inline-block;
   width: @avatarSize;