Question

在橙色和红色之间获得此白色差距。

enter image description here

如果删除<!DOCTYPE html>，则差距会消失但是HTML无效。如何解决橙色 - wrap以获得正确的高度？

所需的所有代码都在这里：

<!DOCTYPE html>
<html lang="de">
    <head>
        <style type="text/css">

            * {
                margin: 0;
                padding: 0;
            }

            .wrap {
                border-bottom: solid 10px red;
            }

            img {
                background-color: orange;
            }

        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="https://www.webkit.org/blog-files/acid3-100.png" alt="" />
        </div>
    </body>
</html>

摘要和/或http://jsfiddle.net/rabkbt9b/

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.wrap {
  border-bottom: solid 10px red;
}

img {
  background-color: orange;
}

＆＃13;

<div class="wrap">
    <img src="https://www.webkit.org/blog-files/acid3-100.png" alt="" />
</div>

＆＃13;

Answer 1

只需将display: block;和margin: 0;提供给所有这些元素：

.wrap {
  border-bottom: solid 10px red;
  margin: 0 auto;
}

img {
  background-color: orange;
  display: block;
  margin: 0;
}

<强>段：

* {
  margin: 0;
  padding: 0;
}

.wrap {
  border-bottom: solid 10px red;
  margin: 0 auto;
}

img {
  background-color: orange;
  display: block;
  margin: 0;
}

<div class="wrap">
    <img src="https://www.webkit.org/blog-files/acid3-100.png" alt="" />
</div>

Doctype html造成差距

1 个答案: