Pero el
padding de la cabecera te va a afectar a todas las líneas, no sólo a la primera que es la que tiene que coincidir con esa parte de la imagen de fondo.
Hay varias formas de hacer eso. pero deberías leer algún manual de CSS.
Si en verdad el alto de esa oreja de papel es igual al alto de la fuente, lo podés arreglar así.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
p {background: url(http://static.forosdelweb.com/fdwtheme/images/buttons/viewpost.gif)
silver no-repeat; font-size: 12px; width: 50%; text-indent: 14px; }
</style>
</head>
<body>
<p>QWERTYUIOP ASDFGHJKLÑ ZXCVBNM QWERTYUIOP ASDFGHJKLÑ ZXCVBNM
QWERTYUIOP ASDFGHJKLÑ ZXCVBNM QWERTYUIOP ASDFGHJKLÑ ZXCVBNM <br>
QWERTYUIOP ASDFGHJKLÑ ZXCVBNM </p>
</body>
</html>
Otra forma rebuscada sería
Código:
...
p:first-letter {padding-left: 14px; }
...
Para navegadores viejos que no interpretan el psudoelemento, o si hay que hacer ajuste de tamaño en el navegador, podés usar una imagen transparente al comienzo del párrafo, que tenga el mismo tamaño que la oreja. Así forzás el indentado.