11.07.2015 Views

el tutorial de Dreamweaver

el tutorial de Dreamweaver

el tutorial de Dreamweaver

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Unidad 17. Estilos CSS Avanzado (X)17.10Controles <strong>de</strong> margenAhora veremos unas cuantas reglas que afectarán a los bor<strong>de</strong>s y márgenes <strong>de</strong> los <strong>el</strong>ementos.Para <strong>el</strong>lo utilizaremos <strong>el</strong> mismo ejemplo: dos cajas, una <strong>de</strong>ntro <strong>de</strong> la otra.margentextomargenmargin-top, margin-right, margin-bottom y margin-left establecen la distancia <strong>de</strong> los bor<strong>de</strong>sd<strong>el</strong> <strong>el</strong>emento al <strong>el</strong>emento padre.Pue<strong>de</strong>s utilizar píx<strong>el</strong>es o porcentajes para indicar estas distancias.Por ejemplo, en la siguente caja se le ha dado al bloque interior la siguiente clase:.bloque_interior {margin-top: 20px;margin-right: 0px;margin-bottom: 5px;margin-left: -10px;}margentextomargenLos márgenes superiores e inferiores se pue<strong>de</strong>n ver en la distancia que hay <strong>de</strong> la caja interior a laspalabras margen.Observa cómo <strong>el</strong> margen 0 d<strong>el</strong> lado <strong>de</strong>recho hace que los bor<strong>de</strong>s que<strong>de</strong>n pegados, mientras queun valor negativo hace que <strong>el</strong> bloque salga <strong>de</strong> la caja.La propiedad margin te permite unificar varias propieda<strong>de</strong>s en una sola:.bloque_interior {margin-top: 20px;margin-right: 0px;margin-bottom: 5px;

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!