需要填充顶部的h1元素
[英]need padding-top for the h1 element
问题描述
I need top padding for the element 'h1 Subscribe to the newsletter /h1', though I had put 20px of padding its not at all working please help , below is the code, 
我需要为元素“ h1订阅新闻稿/ h1”添加顶部填充，尽管我已经将20px的填充完全禁用了，请帮助，以下是代码，
I need top padding for the element 'h1 Subscribe to the newsletter /h1', though I had put 20px of padding its not at all working please help , below is the code, Thanks in advance 我需要为元素'h1订阅新闻稿/ h1'的顶部填充，尽管我已经将20px的填充完全禁用了，请帮助，以下是代码，请提前感谢
<!DOCTYPE html>
<html>
<head>
<metadata name="viewport" content="width=device-width"/>
<metadata charset="utf-8"/>
<metadata name="keywords" content="vasu">
<style>
html{
height:100%;
width:100%;
margin:0px;
padding:0px;
}
body{
background-color:red;
width: 100%;
height: 100%;
margin:0px;
}
header {
color: white;
height: 10%;
width: 100%;
background-color:blue;
margin:0;
padding:0;
border-bottom:3px solid yellow;
}
header h1{
float : left;
padding-top : 10px;
margin:0;
text-align: center;
}
header ul{
color:white;
float : right;
padding : 0;
margin:0;
list-style-type: none;
}
li{
float:left;
padding-top:20px;
padding-right: 20px;
text-align:center;
font-size:20px
}
li a {
color: white;
text-decoration:none;
}
.orng{
color: orange;
}
#showcase{
text-align: center;
color: black;
height:40%;
background: url('business-women-working_4460x4460.jpg') -200px;
margin:0px;
border:0px;
padding-top:10px;
padding-bottom:10px;
}
#newsletter h1{
display:inline;
margin:0px:
padding:20px; ------- its not working
}
#newsletter form{
float:right;
display:inline;
padding : 20px;
}
</style>
</head>
<body>
<header>
<div class="container">
<div id="logo">
<h1><span class="orng">ACME</span> WEB DESIGN</h1>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Hostel</a></li>
<li><a href="">Company</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Web design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae sagittis diam. Donec efficitur metus non commodo tincidunt. Curabitur ornare consectetur eros ac placerat. </p>
</div>
</section>
<section id="newsletter">
<div class="container">
*[![<h1> Subscribe to the newsletter </h1>][1]][1]*
<form>
<input type="text" name="email"></input>
<button type="submit" name="subscribe">SUBSCRIBE</button>
<form>
</div>
</section>
<footer>
</footer>
</body>
</html>
3 个解决方案
解决方案1
1 已采纳 2018-11-05 17:29:20
Change the h1 element to display as inline-block , not inline . 更改h1元素以显示为inline-block ，而不是inline 。 Inline elements with vertical padding do not behave as you might expect: 具有垂直填充的内联元素的行为不像您预期的那样：
#newsletter h1{
display:inline-block;
padding:20px;
}
解决方案2
0 2018-11-05 17:26:01
我无法真正为您提供默认答案，但也许尝试.container h1 {}或尝试放入jsfiddle或Codepen
解决方案3
0 2018-11-05 17:26:06
You have a typo in the line before: 您之前的一行中有错别字：
#newsletter h1{
display:inline;
margin:0px: /* replace : with ; */
padding:20px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.