Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:1eval:tema03 [2021/02/21 17:26]
admin [Como añadir CSS]
+++ clase:daw:diw:1eval:tema03 [2023/11/21 09:03] (actual)
admin [display]
@@ Línea 93: / Línea 93: @@
     * [[https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1|Ejemplo display]]
     * [[http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements|How to remove the space between inline-block elements?]]
+==== Ejemplo ====
+Vamos a ver un ejemplo con las diferencias entre ''<span>'', ''<div>'', ''<span> con inline-block'' y ''<div> con inline-block''
+<sxh css>
+.destacar {
+  color:red;
+  font-weight:bold
+}
+</sxh>
+<sxh html>
+	<p>
+span:Frodo lo sacó del bolsillo del <span class="destacar">pantalón</span> ,donde lo guardaba enganchado a una <span class="destacar">cadena</span> que le colgaba del cinturón.
+	</p>
+	<hr>
+	<p>
+div:Frodo lo sacó del bolsillo del <div class="destacar">pantalón</div> ,donde lo guardaba enganchado a una <div class="destacar">cadena</div> que le colgaba del cinturón.
+	</p>
+	<hr>
+	<p>
+span inline-block:Frodo lo sacó del bolsillo del <span style="display:inline-block" class="destacar">pantalón</span> ,donde lo guardaba enganchado a una <span style="display:inline-block" class="destacar">cadena</span> que le colgaba del cinturón.
+	</p>
+	<hr>
+	<p>
+div inline-block:Frodo lo sacó del bolsillo del <div style="display:inline-block" class="destacar">pantalón</div> ,donde lo guardaba enganchado a una <div style="display:inline-block" class="destacar">cadena</div> que le colgaba del cinturón.
+	</p>
+</sxh>

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página