Heim  >  Fragen und Antworten  >  Hauptteil

So deaktivieren Sie die Randfaltung

<p>Gibt es eine Möglichkeit, die Randfaltung vollständig zu deaktivieren? Die einzige Lösung, die ich gefunden habe (mit dem Namen „uncollapsing“), ist die Verwendung eines 1-Pixel-Rahmens oder eines 1-Pixel-Abstands. Ich finde das inakzeptabel: Zusätzliche Pixel erschweren die Berechnungen unnötig. Gibt es eine vernünftigere Möglichkeit, das Zusammenbrechen dieser Marge zu verhindern? </p>
P粉530519234P粉530519234449 Tage vor441

Antworte allen(2)Ich werde antworten

  • P粉521013123

    P粉5210131232023-08-22 17:46:33

    一个不会对视觉产生影响的禁用外边距折叠的巧妙技巧,据我所知,是将父元素的内边距设置为0.05px

    .parentClass {
        padding: 0.05px;
    }

    内边距不再为0,因此不会发生折叠,但同时内边距足够小,视觉上会被四舍五入为0。

    如果需要其他内边距,则只在不希望发生外边距折叠的“方向”上应用内边距,例如padding-top: 0.05px;

    工作示例:

    .noCollapse {
      padding: 0.05px;
    }
    
    .parent {
      background-color: red;
      width: 150px;
    }
    
    .children {
      margin-top: 50px;
    
      background-color: lime;      
      width: 100px;
      height: 100px;
    }
    <h3>边框折叠</h3>
    <div class="parent">
      <div class="children">
      </div>
    </div>
    
    <h3>无边框折叠</h3>
    <div class="parent noCollapse">
      <div class="children">
      </div>
    </div>

    编辑:将值从0.1更改为0.05。正如克里斯·摩根在下面的评论中提到的,并且从这个小测试中可以看出,似乎Firefox确实考虑了0.1px的内边距。不过,0.05px似乎是有效的。

    Antwort
    0
  • P粉588660399

    P粉5886603992023-08-22 16:36:44

    有两种主要的外边距折叠:

    • 相邻元素之间的外边距折叠
    • 父元素和子元素之间的外边距折叠

    只有在后一种情况下,使用填充或边框才能防止折叠。此外,任何不同于其默认值(visible)的overflow属性应用于父元素都会防止折叠。因此,overflow: autooverflow: hidden将产生相同的效果。也许使用hidden时唯一的区别是如果父元素具有固定高度,则会意外隐藏内容。

    其他一些应用于父元素后可以帮助修复此行为的属性有:

    • float: left / right
    • position: absolute
    • display: flex / grid

    您可以在此处测试它们:http://jsfiddle.net/XB9wX/1/

    我应该补充说,像往常一样,Internet Explorer是个例外。具体来说,在IE 7中,当为父元素指定某种布局(例如width)时,外边距不会折叠。

    来源:Sitepoint的文章折叠外边距

    Antwort
    0
  • StornierenAntwort