display:inline与margin、padding、width、height的关系

Question

如果我为任何元素设置display:inline，那么margin、padding、width和height是否不会影响该元素？

在该元素上使用margin、padding、width和height是否需要使用float:left、display:block或display:inline-block？

- Jitendra Vyas

---

“padding”对于行内元素也适用。 - Pekka

Answer 1

请参考CSS规范中的"内联格式化上下文"章节获取完整解释。

基本上，margin、padding和border可以设置在内联级别的元素上，但它们可能不会按你期望的方式工作。如果只有一行，则行为可能还好，但同一流中的其他行可能会展示与您期望的不同的行为（例如，padding将不被尊重）。此外，如果内联框包含可分割元素并且达到包含元素的边缘，则会打断内联框；在这种情况下，在断点处，边距和填充也不会被尊重。

在这里找到了一个关于列表的好例子。

- MaxVT

Answer 2

对于inline元素，填充（Padding）是有效的。但是高度和宽度则不会生效。

http://jsfiddle.net/d89Wd/

- Calum

---

边距怎么样？ - Movahhedi

Answer 3

确实，对于 display:block, display:inline block 和 display:float，元素的原始高度、宽度以及 padding、margin 都会被尊重和渲染，没有任何妥协。
但是当涉及到 display:inline 时，元素不会按照其原始高度和宽度进行渲染，内容的宽度和高度取决于字体大小和内容长度。

(A) 谈到 padding 和 margin，就像普通文本中的 padding 一样，水平方向上允许使用 padding 和 margin，但不允许在垂直方向上使用。添加了 padding 和 margin 后，内联元素的高度和宽度似乎增加了，但实际上，在这种情况下，内容框的大小始终与子文本大小保持恒定。margin 的主要作用是与周围元素保持间距，由于之间没有空间，因此没有应用 margin。

(B) 另外，当您检查盒模型时，也存在padding，但 padding 的真正要点是将边框从内容中推开，而实际上边框被破坏了，因为边框是为了防止元素与周围元素交叉，所以 padding 不存在。您可以看到在水平方向上的 padding 增加时，周围的元素也被推开。 我建议您先查看这两个代码，然后再回来解释，主要是两个要点（A 和 B）：
https://jsfiddle.net/d89Wd/
还有我的版本，
HTML 代码

<div class="inline-block">Inline-Block</div>
<div class="block">Block</div>
<div class="inline">Inline</div>
<div class="float">Float</div>

CSS 代码

.inline{
    display:inline; 
    font-size: 10px;
    border: 1px solid red;
}
.inline-block{
    display:inline-block;   
}
.block{
    display:block;   
}
/* .float{
    float:left;   
} */
div{
    background-color:blue;
    color:white;
    height:100px;
    width:200px;
    padding:10px;
    margin-bottom:10px;
}

我将内联元素夹在块和浮动之间，..我保持所有div的底部边距为10像素。我改变了字体大小，因为我之前告诉过你内联元素的高度会呈现为文本字体的高度。
我建议复制这段代码并在Firefox中运行，然后检查它的框模型。你会看到内联块、块以及浮动的底部边距存在，但内联元素没有。（我会说边距填充在物理上存在，但没有产生效果，或者它们不会创建空间或推动边框）
之后，你可以通过添加一些文本来检查内联元素是否存在水平边距。

HTML代码

<div class="inline-block">Inline-Block</div>
<div class="block">Block</div>
<div class="inline">Inline</div>Hey mate, how is it going?
<div class="float">Float</div>

CSS 代码

.inline{
    display:inline; 
    border: 1px solid red;
   margin: 0px 20px 10px 0px; 
    padding: 15px 90px 15px 0px; 
    font-size: 10px;
}
.inline-block{
    display:inline-block;   
}
.block{
    display:block;   
}
/* .float{
    float:left;   
} */
div{
    background-color:blue;
    color:white;
    height:100px;
    width:200px;
    margin-bottom:10px;
}

- Coderey123

Answer 4

我知道这个回答有点晚了，但是我写了一个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();
});
};

- Dillen Meijboom