Question

我有这个简单的html，我希望在不改变HTML的情况下将其设置为一个体面的页面。但是当我开始时，我在布局标签之间遇到了那些空行。以下代码段显示<nav>和<header>代码。为什么它们之间有空行。我也试过评论标签之间的单个空格，但这没有帮助（这是有道理的，因为单个空格不应该导致空行）

＆＃13;

html {
	font-size:14px;
	font-family: 'Lato';
}
body {
	margin:0;
}
header {
	background: radial-gradient(
		ellipse at center,
		rgba(192,169,145,1) 0%,
		rgba(192,169,145,1) 59%,
		rgba(168,143,121,1) 100%
	);
}
body > nav > * {
	display: inline-block;
}
	nav ul {
		float:right;
	}
	nav ul li {
		display: inline-block;
		list-style: none;
		text-decoration: none;
	}

＆＃13;

<body>
    <nav>
        <p class="brand">potato &trade;</p>
        <ul class="nav-primary">
            <li class="nav-item"><a href="#">about</a></li>

            <li class="nav-item"><a href="#">features</a></li>

            <li class="nav-item button-cta"><a href="#">buy it now</a></li>
        </ul>
    </nav>
    <header>
        <h1 class="header-title">
            "sweet nutritious and delicious"
        </h1>

        <h3 class="header-subtitle">
            The key to happiness is hidden in the Potato &trade;
        </h3>

        <img src="img/potato-header.png" alt="Potato" class="header-potato">
    </header>
</body>
</html>

＆＃13;

Answer 1

试试这个：

* {
margin: 0;
padding: 0;
}

Answer 2

html {
	font-size:14px;
	font-family: 'Lato';
}
body {
	margin:0;
}
header {
	background: radial-gradient(
		ellipse at center,
		rgba(192,169,145,1) 0%,
		rgba(192,169,145,1) 59%,
		rgba(168,143,121,1) 100%
	);
}
body > nav > * {
	display: inline-block;
}
	nav ul {
		float:right;
	}
	nav ul li {
		display: inline-block;
		list-style: none;
		text-decoration: none;
	}
h1 {
  margin: 0px;
  }
nav {
  background: green;
  }

<body>
    <nav>
        <p class="brand">potato &trade;</p>
        <ul class="nav-primary">
            <li class="nav-item"><a href="#">about</a></li>

            <li class="nav-item"><a href="#">features</a></li>

            <li class="nav-item button-cta"><a href="#">buy it now</a></li>
        </ul>
    </nav>
    <header>
        <h1 class="header-title">
            "sweet nutritious and delicious"
        </h1>

        <h3 class="header-subtitle">
            The key to happiness is hidden in the Potato &trade;
        </h3>

        <img src="img/potato-header.png" alt="Potato" class="header-potato">
    </header>
</body>
</html>

h1默认获得保证金，我只是将其删除。检查代码段中的最后一行

Answer 3

您正在处理：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

有几种方法可以处理来自父容器外的第一个和最后一个孩子折叠的边距（参见上面的链接）：最简单的可能是（为了避免孩子重置保证金）：

import swal from 'sweetalert2'

要在下面测试的代码段：

header, nav {
  overflow:hidden;
}

header, nav {
  overflow:hidden;
}

html {
	font-size:14px;
	font-family: 'Lato';
}
body {
	margin:0;
}
header {
	background: radial-gradient(
		ellipse at center,
		rgba(192,169,145,1) 0%,
		rgba(192,169,145,1) 59%,
		rgba(168,143,121,1) 100%
	);
  }

body > nav > * {
	display: inline-block;
}
	nav ul {
		float:right;
	}
	nav ul li {
		display: inline-block;
		list-style: none;
		text-decoration: none;
	}

Answer 4

你的H1有保证金最高，添加：

whatsapp

现场演示 - https://jsfiddle.net/grinmax_/rrvpwjxh/

导航和标题标记之间显示HTML不需要的空行

4 个答案: