顯示：內嵌餘量，填充，寬度，高度

Question

如果我設置display:inline任何元素然後將margin，padding，width，height不是元件上影響？

是否有必要使用float:left或display:block或display:inline-block使用margin，padding，width，height該元素嗎？

Answer 1

請參閱 「Inline formatting contexts」 在CSS規範的完整的解釋。

基本上可以在內聯級元素上設置邊距，填充和邊框，但它們可能不像您期望的那樣運行。如果只有一行，行爲可能會很好，但同一流中的其他行可能會表現出與您的期望不同的行爲（即不會遵守填充）。另外，如果內聯框包含易碎元素併到達包含元素的邊界，則可以將其打亂。在這種情況下，在休息時間，邊距和填充也不會受到尊重。

發現其中一個很好的例子使用列表：http://www.maxdesign.com.au/articles/inline/

Answer 2

填充將適用於inline。但是高度和寬度不會。

http://jsfiddle.net/d89Wd/

編輯：糾正

Answer 3

我知道這是一個相當晚的答案，但我寫了靠墊上內聯元素（用斷字）一個jQuery插件看到的jsfiddle：

http://jsfiddle.net/RxKek/

插件代碼：

$.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(); 
}); 
};