⊗mkPmFlPC 192 of 250 menu

Combinación de float y padding en CSS

Coloquemos nuevamente la imagen sobre los párrafos, dejándoles sin embargo un padding izquierdo. En este caso el padding solo alejará el texto que está adyacente a la izquierda del div padre, y no a nuestra imagen:

<div> <img src="img.png" alt=""> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </p> <p> some long text </p> </div> div { width: 400px; border: 1px solid red; text-align: justify; } p { margin-left: 30px; padding-left: 30px; border: 1px solid green; } img { float: left; opacity: 0.5; }

:

Y ahora pongamos la imagen en el primer párrafo - se moverá hacia la derecha junto con el texto de los párrafos:

<div> <p> <img src="img.png" alt=""> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </p> <p> some long text </p> </div> div { width: 400px; border: 1px solid red; text-align: justify; } p { margin-left: 30px; padding-left: 30px; border: 1px solid green; } img { float: left; opacity: 0.5; }

:

Español
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Usamos cookies para el funcionamiento del sitio, análisis y personalización. El procesamiento de datos se realiza de acuerdo con la Política de privacidad.
aceptar todas configurar rechazar