¿Cómo rellenar un div sin extender el borde?

tengo este código:¿Cómo rellenar un div sin extender el borde?

<html> 
<head> 
<style type="text/css"> 
.container { 
    border-bottom: 1px dotted #999999; 
    width:500px; 
    padding-left:200px 
} 
</style> 
</head> 
<body> 
<div class="container">asdf</div> 
</body> 
</html>

y funciona bien, excepto por el hecho de que el borde inferior también se aplica al 200 píxeles antes de que el guión. Quiero que el borde inferior comience a 200px. Se puede hacer esto?

Fuente

2011-03-13 John Smith

Uso margen en lugar de relleno o utilizar un div interior .. (actualizado para que coincida con los requisitos dados a conocer en los comentarios)

<html> 
<head> 
    <style type="text/css"> 
     .container {    
      width:500px; 
      padding-left:200px 
     } 
     .inner{ 
      border-bottom: 1px dotted #999999; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="inner"> 
      asdf</div> 
    </div> 
</body>

Esto es lo que debe ser similar: http://jsfiddle.net/dKVTb/1/

Fuente

2011-03-13 01:48:40 markt

Me adelantó. –

A continuación, agregue un div infantil que tenga el contenido y agregue el relleno al exterior o el margen al interior. – markt

¡Esto funciona gracias! –

Tal vez como este, con margin-left

http://jsfiddle.net/ppMmy/

Las propiedades de relleno de CSS definen el espacio entre el borde del elemento y el contenido del elemento.

lo tanto no "relleno" el conjunto <div>

Fuente

2011-03-13 01:49:46 Trufa

Si ese es el caso, utilice la siguiente:

<div class="container"> 
    <div class="content"> 
     content here 
    </div> 
</div>

código CSS:

.container {  
    padding-left:200px; 
} 
.content {  
    width:500px; 
    border-bottom: 1px dotted #999999; 
}

Fuente

2011-03-13 01:56:39 Titus

¿Cómo rellenar un div sin extender el borde?

Respuesta

Cuestiones relacionadas