display: inline con margen, relleno, anchura, altura

Question

Si fijo display:inline para cualquier elemento continuación se margin, padding, width, height no afecta en ese elemento?

¿Es necesario utilizar float:left o display:block o display:inline-block utilizar margin, padding, width, height en ese elemento?

Answer 1

Por favor, consulte la sección "Inline formatting contexts" en la especificación CSS para la explicación completa.

Básicamente el margen, el relleno y el borde se pueden configurar en elementos de nivel en línea, pero es posible que no se comporten como se espera. Es probable que el comportamiento sea correcto si solo hay una línea, pero otras líneas en el mismo flujo probablemente mostrarán un comportamiento diferente de sus expectativas (es decir, el relleno no se respetará). Además, su caja en línea puede romperse si contiene elementos rompibles y alcanza el margen del elemento contenedor; en ese caso, en el punto de ruptura, los márgenes y el relleno no serán respetados también.

Encontramos un buen ejemplo de que con las listas: http://www.maxdesign.com.au/articles/inline/

Answer 2

El relleno funcionará para inline. Sin embargo, la altura y el ancho no.

http://jsfiddle.net/d89Wd/

Editar: corregido

Answer 3

Sé que esto es bastante una respuesta tardía pero escribí un plugin de jQuery que apoyan el relleno de los elementos en línea (con separación de palabras) ver este jsFiddle:

http://jsfiddle.net/RxKek/

Código Plugin:

$.fn.outerHTML = function() { 
// IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning 
return (!this.length) ? this : (this[0].outerHTML || (
    function (el) { 
     var div = document.createElement('div'); 
     div.appendChild(el.cloneNode(true)); 
     var contents = div.innerHTML; 
     div = null; 
     return contents; 
    })(this[0])); 
}; 

/* 
Requirements: 

1. The container must NOT have a width! 
2. The element needs to be formatted like this: 

<div>text</div> 

in stead of this: 

<div> 
    text 
</div> 
*/ 

$.fn.fixInlineText = function (opt) { 
return this.each(function() { 
    //First get the container width 
    var maxWidth = opt.width; 

    //Then get the width of the inline element 
    //To calculate the correct width the element needs to 
    //be 100% visible that's why we make it absolute first. 
    //We also do this to the container. 
    $(this).css("position", "absolute"); 
    $(this).parent().css("position", "absolute").css("width", "200%"); 

    var width = $(this).width(); 

    $(this).css("position", ""); 
    $(this).parent().css("position", "").css("width", ""); 

    //Don't do anything if it fits 
    if (width < maxWidth) { 
     return; 
    } 

    //Check how many times the container fits within the box 
    var times = Math.ceil(width/maxWidth); 

    //Function for cleaning chunks 
    var cleanChunk = function (chunk) { 
     var thisChunkLength = chunk.length - 1; 

     if (chunk[0] == " ") chunk = chunk.substring(1); 
     if (chunk[thisChunkLength] == " ") chunk = chunk.substring(0, thisChunkLength); 

     return chunk; 
    }; 

    //Divide the text into chunks 
    var text = $(this).html(); 
    var textArr = text.split(" "); 

    var chunkLength = Math.ceil((textArr.length - 1)/times); 
    var chunks = []; 

    var curChunk = ""; 
    var curChunkCount = 0; 

    var isParsingHtml = false; 

    //Loop through the text array and split it into chunks 
    for (var i in textArr) { 
     //When we are parsing HTML we don't want to count the 
     //spaces since the user doesn't see it. 
     if (isParsingHtml) { 
      //Check for a HTML end tag 
      if (/<\/[a-zA-Z]*>/.test(textArr[i]) || /[a-zA-Z]*>/.test(textArr[i])) { 
       isParsingHtml = false; 
      } 
     } else { 
      //Check for a HTML begin tag 
      if (/<[a-zA-Z]*/.test(textArr[i])) { 
       isParsingHtml = true; 
      } 
     } 

     //Calculate chunks 
     if (curChunkCount == (chunkLength - 1) && !isParsingHtml) { 
      curChunk += textArr[i] + " "; 
      chunks.push(cleanChunk(curChunk)); 
      curChunk = ""; 
      curChunkCount = -1; 
     } else if ((i == (textArr.length - 1))) { 
      curChunk += textArr[i]; 
      chunks.push(cleanChunk(curChunk)); 
      break; 
     } else { 
      curChunk += textArr[i] + " "; 
     } 

     if (!isParsingHtml) { 
      curChunkCount++; 
     } 
    } 

    //Convert chunks to new elements 
    var el = $($(this).html("").outerHTML()); 

    for (var x in chunks) { 
     var new_el = el.clone().html(chunks[x]).addClass("text-render-el"); 
     var new_el_container = $("<div/>").addClass("text-render-container"); 

     new_el_container.append(new_el); 

     $(this).before(new_el_container); 
    } 

    //Finally remove the current element 
    $(this).remove(); 
}); 
};