html - que - Margen derecho no funciona en ancho 100%

height 100 css3

Question

Tengo un DIV que contiene una imagen y un segundo DIV. El DIV principal se establece en position: absolute; El niño DIV se establece en position: relative . La idea es que muestre el título de mi foto en la parte superior de mi imagen.

El DIV secundario debe tener 100% ancho del 100% del padre, menos 10 10px a la izquierda, derecha e inferior, más un fondo negro.

Aquí está mi HTML:

<div class="span15 article-container">
    <img src="images/example-image-1.png" />
    <div class="photo-caption">This is the subtitle text on top.</div>
</div>

Y aquí está mi CSS:

.article-container  {
                    position: relative;
                    }

.photo-caption  {
            width: 100%;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            }

El margen izquierdo .photo-caption fuera de los límites de .article-container . El margen derecho no parece tener ningún efecto.

También he intentado arreglar esto con el tamaño de la caja. Parece que el ancho de .photo-caption reduce al ancho principal, pero aún .photo-caption .

Answer 1

El margen es la distancia de cada lado al elemento vecino O los bordes del documento.

El margen derecho no significa que empujará el elemento hacia la izquierda. Significa que generará espacio en el lado derecho. Si viene el siguiente elemento, vendrá después del derecho de margen mencionado. En su caso, el ancho es 100%. Está disponible para margen derecho.

Punto de confusión: 1) el efecto visual es diferente cuando el ancho es automático. El mismo margen se genera en la derecha. Pero debido a la ausencia de la propiedad de ancho, el ancho es libre de cambiar.

2) Mismo efecto cuando el elemento es flotado a la derecha.

Estos 2 puntos mencionados anteriormente tendrán una imagen diferente del margen derecho en mente.

Answer 2

El problema es que width=100% daría ancho de photo-caption exacto de article-container ; agregar márgenes (o relleno) no afectaría el cálculo del ancho. Puede hacerlo usted mismo usando el css calc() para que el estilo se convierta en:

.photo-caption  {
    width: calc(100% - 20px); // 20 = right margin + left margin
    background-color: black;
    position: absolute;
    bottom: 0px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}

Tenga en cuenta que es posible que desee comprobar la compatibilidad con el navegador calc () here

Answer 3

El problema es que está configurando su ancho al 100%, lo que no deja margen para los márgenes. En su lugar, ajuste su ancho a un porcentaje inferior al 100% y luego especifique su margen como la mitad del porcentaje del espacio restante.

Por ejemplo:

style="width:98%; margin-left: 1%;"

Answer 4

Es mejor si eliminas width:100% . escribe así:

.photo-caption  {
            left:0;
            right:0;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            }

Answer 5

No necesita ancho: 100% si muestra bloque. Eso podría resolver todos estos pequeños problemas.

.photo-caption  {
        display:block;
        background-color: black;
        position: absolute;
        bottom: 0px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        padding:10px
        }

Answer 6

Por:

Respuesta simple: no intentes usar el margen derecho. Use ''margin-left: xxxpx; ''- haga que el xxx sea lo suficientemente grande como para empujar su caja div (Estilo Div = caja) hasta donde sea necesario. No necesita un violín, puede colocarlo exactamente donde lo desee.

Answer 7

Use el padding junto con box-sizing o el bloque anidado con márgenes dentro de su posición absoluta sin márgenes.

Answer 8

un elemento posicionado relativo con la posición superior, izquierda, derecha, inferior, no con margen.