pantalla: en línea con margen, relleno, ancho, alto

Si configuro la display:inline para cualquier elemento, ¿el margin , el padding , el width y la height no afectarán a ese elemento?

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

Consulte ” Contextos de formato en línea ” en las especificaciones de CSS para obtener una 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. El comportamiento probablemente será 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.

Encontré un buen ejemplo de eso con las listas: http://www.maxdesign.com.au/articles/inline/

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

http://jsfiddle.net/d89Wd/

Editar: corregido

Sé que esta es una respuesta bastante tardía, pero escribí un plugin de jQuery que admite el relleno de elementos en línea (con la ruptura de palabras), consulte este JSfiddle:

http://jsfiddle.net/RxKek/

Código de complemento:

 $.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: 
text
in stead of this:
text
*/ $.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 = $("
").addClass("text-render-container"); new_el_container.append(new_el); $(this).before(new_el_container); } //Finally remove the current element $(this).remove(); }); };