【问题标题】:display:inline with margin, padding, width, height显示:内嵌边距、内边距、宽度、高度
【发布时间】:2011-04-18 07:50:25
【问题描述】:

如果我为任何元素设置display:inline,那么marginpaddingwidthheight 不会影响该元素?

在那个元素上使用marginpaddingwidthheight是否有必要使用float:leftdisplay:blockdisplay:inline-block

【问题讨论】:

  • padding 也适用于内联元素。

标签: html css xhtml


【解决方案1】:

填充适用于inline。但是高度和宽度不会。

http://jsfiddle.net/d89Wd/

编辑:更正

【讨论】:

    【解决方案2】:

    有关完整说明,请参阅 CSS 规范中的“Inline formatting contexts”。

    基本上可以对内联元素设置边距、内边距和边框,但它们的行为可能与您预期的不同。如果只有一行,则该行为可能没问题,但同一流程中的其他行可能会表现出与您的预期不同的行为(即不遵守填充)。此外,如果您的行内框包含可破坏元素并到达包含元素的边距,则它可能会被破坏;在这种情况下,在中断点,边距和填充也不会受到尊重。

    找到了一个很好的列表示例:http://www.maxdesign.com.au/articles/inline/

    【讨论】:

      【解决方案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();
      });
      };
      

      【讨论】: