Foros del Web » Creando para Internet » CSS »

Aplicar padding en inline

Estas en el tema de Aplicar padding en inline en el foro de CSS en Foros del Web. Buenas, tengo un problema que no le encuentro solución. Tengo un texto en bloque inline, que tiene varios renglones, al que no puedo aplicarle padding. ...
  #1 (permalink)  
Antiguo 27/09/2015, 02:23
 
Fecha de Ingreso: octubre-2010
Ubicación: Buenos Aires
Mensajes: 126
Antigüedad: 13 años, 5 meses
Puntos: 11
Aplicar padding en inline

Buenas, tengo un problema que no le encuentro solución.
Tengo un texto en bloque inline, que tiene varios renglones, al que no puedo aplicarle padding.
Una imagen vale mas que mil palabras asi me entienden.

Quiero lograr esto:


Pero me sale esto:


El código que tengo:

Código CSS:
Ver original
  1. #wrapper {
  2.     width: 200px;
  3. }
  4.  
  5. h1 {
  6.     background: red;
  7.     display: inline;
  8.     padding: 10px;
  9.     font-size: 20px;
  10.     line-height: 50px;
  11. }

Entiendo que me lo toma como una sola línea, por eso me aplica el padding solo en el comienzo y en el final. No logro comprender como poder hacer para que en cada supuesto salto de línea me aplique el padding. Alguna sugerencia?
  #2 (permalink)  
Antiguo 27/09/2015, 03:15
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: Aplicar padding en inline

Hola
Fijate en como lo hacen los de clarin.com por ejemplo.
No solo usan el <h1> sino que también le agregan un span, y en la combinación de css a estos dos elementos logran lo que estás buscando.
A tener en cuenta:
backgrounds y box-shadow.


Código CSS:
Ver original
  1. background: url('../images/titulo-nota-img-bg.png') repeat;
  2.     background: rgba(255,255,255,.8);
  3.     box-shadow: -10px 0 0 rgba(255,255,255,.8);
  4.     -ms-box-decoration-break: clone;
  5.     -webkit-box-decoration-break: clone;
  6.     -o-box-decoration-break: clone;
  7.     box-decoration-break: clone;
  8. }
  9. h2 {
  10.     font-size: 28px;
  11.     font-weight: bold;
  12.     display: inline;
  13.     line-height: 39px;}
  14.  
  15.  span {
  16.     box-shadow: 10px 0 0 rgba(255,255,255,.8);
  17.     -ms-box-decoration-break: clone;
  18.     -webkit-box-decoration-break: clone;
  19.     -o-box-decoration-break: clone;
  20.     box-decoration-break: clone;
  21. }

Usa las herramientas de desarrollo del navegador para que puedas ver que sucede al desactivar cada propiedad y te darás cuenta que necesitas.

En lo personal no me gusta nada ese diseño, pero bue, para gustos...


Edito:
Probando un poco, que puedes obtener lo mismo con solo aplicar box-shadow al h1, pero dando sombra hacia ambos lados:
Código CSS:
Ver original
  1. h1 {
  2.     background: red;
  3.     display: inline;
  4.     font-size: 20px;
  5.     line-height: 30px;
  6.     box-shadow: -10px 0 0 red,  10px 0 0 red;
  7. }

Y algo más para tener en cuenta:
Box-decoration-break : Un poco de teoría en http://ksesocss.blogspot.com/2012/04...ss3-en-la.html
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 27/09/2015 a las 03:28

Etiquetas: inline, padding
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:50.