为什么我在使用margin时仍然有margin：0;在那个元素上

时间：2019-02-10 04:34:40

标签： html css media-queries

我正在为大型手机屏幕编写媒体查询。当页脚部分以这种尺寸显示时，我想删除带有“内部”类的div上的边距，并将它们在屏幕的左侧对齐。这会删除快速链接的div上的边距，但不会删除社交和联系方式部分。他们还有左边距吗？enter image description here 

body, html {
	margin: 0;
	padding: 0;
}

/*---HEADER---*/

li a {
	text-decoration-line: none;
	color: rgba(102,102,102,0.75);
}

.m1, .m2, .m3 {
	border-radius: 4px;
	margin: 5px;
	width: 45px;
	height: 5px;
	background-color: red;
	float: left;
}

header {
	background: blue;
	height: 100vh;
	background-attachment: fixed;
}

nav {
	background-color: white;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	box-shadow: 0px 0px 100px grey;
}

ul {
	margin-right: 30px;
	margin-top: 25px;
}

li {
	display: inline-block;
	font-size: 1.55rem;
	margin-right: 20px;
	font-family: 'Rajdhani';
}

li a:hover {
	cursor: pointer;
	color: #1a1a1a;
	transition: all 0.7s ease;
}

.after:after {
	position: relative;
	left: 12px;
	top: 2px;
	display: inline-block;
	content: "";
	width: 1px;
	height: 20px;
	background-color: rgba(102,102,102,0.25);
}

.logo {
	color: red;
	font-size: 3.7rem;
	margin: 10px;
	opacity: 1;
	margin-left: 30px;
}

.phrase {
	text-align: center;
	position: relative;
	top: 300px;
}

.phrase p {
	color: white;
	font-size: 3.5rem;
	font-family: 'Arvo';
	margin-bottom: 30px;

}

.phrase a {
	background-color: red;
	border-radius: 25px;
	color: white;
	font-family: 'Bitter';
	font-size: 1.8rem;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.phrase a:hover {
	background-color: #cc2900;
	transition: all 0.2s ease;
	cursor: pointer;
}

.phrase .fas {
	display: block;
	color: white;
	font-size: 3.5rem;
	margin-top: 15px;
}

/*---PROMISE---*/

.stats {
	width: 100%;
	display: flex;
	box-shadow: 0px 0px 150px grey;
	position: relative;
	z-index: 1;
	background-color: white;
}

.stats div {
	display: inline-block;
	flex-basis: 35%;
	text-align: center;
	padding-bottom: 30px;
}

.stats p {
	font-size: 2rem;
	color: rgba(102,102,102, 1);
	font-family: 'Rajdhani';
	margin-bottom: 0;
	margin-top: 10px;
}

.stats div:before {
	display: inline-block;
	content: '';
	width: 2px;
	height: 35px;
	background-color: rgba(102,102,102, 0.60);
}

.promise {
	width: 100%;
	background-image: url('../img/concrete.jpg');
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}

.promise .wrapper {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.promise h1 {
	position: relative;
	top: 40px;
	color: white;
	font-family: 'Arvo';
	font-size: 3.5rem;
	text-align: center;
	margin-top: 0;
	word-spacing: 7px;
	text-shadow: 0px 0px 100px grey;
}

.promise p {
	color: white;
	font-size: 1.8rem;
	font-family: 'Rajdhani';
	margin-bottom: 0;
	padding-bottom: 60px;
	text-align: center;
	margin-top: 40px;
	padding-left: 50px;
	padding-right: 50px;
}

/*---FOOTER---*/

.footer .wrapper {
	display: flex;
}

.footer div {
	display: inline-block;
	flex-basis: 33.33%;
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 1);
	margin-top: 5px;
}

.footer h1 {
	font-size: 2rem;
	margin-top: 15px;
}

.footer .inner {
	margin-left: 70px;
}

.footer .inner:before {
	display: inline-block;
	content: '';
	width: 27.1%;
	height: 2px;
	background-color: rgba(102,102,102, 0.6);
	position: absolute;
	margin-top: 54px;
}


.links .inner:after {
	content: '';
	width: 10.5%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -151px;
}

.social .inner:after {
	content: '';
	width: 5.8%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -171px;
}

.contact .inner:after {
	content: '';
	width: 7.5%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -174.5px;
}


.wrap:before {
	content: '';
	width: 100px;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: 55px;
}

.links a {
	display: block;
	text-decoration-line: none;
	color: rgba(102,102,102, 1);
	font-size: 1.2rem;
	position: relative;
	top: -10px;
	transition: color 0.4s ease;
}

.links a:hover {
	color: red;
}

.contact p {
	position: relative;
	top: -10px;
}

.social i {
	font-size: 1.7rem;
	margin-right: 5px;
	position: relative;
	top: -20px;
	color: rgba(102,102,102, 0.7);
	transition: all 0.4s ease;
}

.social i:hover {
	color: red;
	cursor: pointer;
}

#msg {
	margin-top: -15px;
}

.footer-textarea {
	background-color: rgba(102,102,102, 0.2);
	outline: none;
	color: rgba(102,102,102, 1);
	resize: none;
	width: 100%;
}

.footer button {
	position: absolute;
	margin-left: 23.2%;
	margin-top: -40px;
	border: none;
	font-family: 'Rajdhani';
	font-size: 1.2rem;
	transition: all ease 0.4s;
	outline: none;
}

button:hover {
	cursor: pointer;
	color: red;
}

.dark {
	color: red;
}

.copyright {
	position: absolute;
	background-color: white;
	text-align: center;
	width: 100%;
	margin-bottom: 0;
	font-size: 1.2rem;
	padding-bottom: 4px;
}

/*---MEDIA QUERIES---*/

@media screen and (max-width: 425px) {

	/*---NAV---*/

	.logo {
		font-size: 3rem;
		margin-left: 10px;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	nav li {
		display: none;
	}

	.ham-menu {
		width: 75px;
		height: 75px;
		position: fixed;
		right: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	/*---FOOTER---*/

	.footer .wrapper {
		display: flex;
		flex-direction: column;
	}

	.footer div {
		border: 1px solid red;
		display: inline-block;
		font-family: 'Rajdhani';
		color: rgba(102,102,102, 1);
		margin: 0;
	}

	.footer h1 {
		font-size: 2rem;
		margin-top: 10px;
	}

	.footer .inner {
		margin: 0;
	}

	.footer .inner:before {
		display: inline-block;
		content: '';
		width: 27.1%;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 54px;
	}

}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, intitial-scale=1.0">
	<title>Kane Concrete & Construction LLC</title>
	<link rel="stylesheet" href="../css/style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
	<div class="inner-wrap">
		<header>
			<nav>
				<div class="logo">
					<i class="fab fa-accusoft"></i>
				</div>

				<div class="nav">
					<div class="ham-menu">
						<div class="m1"></div>
						<div class="m2"></div>
						<div class="m3"></div>
					</div>
					<ul>
						<li class="after"><a href="index.html">Home</a></li>
						<li class="after"><a href="about.html">About</a></li>
						<li class="after"><a href="about.html#services">Services</a></li>
						<li class="after"><a href="careers.html">Careers</a></li>
						<li class="after"><a href="#">Gallery</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</div>
			</nav>
			
			<div class="phrase">
				<p>It all starts at the foundation.</p>
				<a>Get a Quote</a>
				<i class="fas fa-angle-down"></i>
			</div>	
		</header>

		<section class="stats">
			<div id="start-year">
				<p>Established</p><br>
				<p style="color: red; font-size: 2.3rem; font-family: 'Roboto'; font-weight: bold;">2015</p>
			</div>

			<div id="projects">
				<p>Projects</p><br>
				<p style="color: red; font-size: 2.3rem; font-family: 'Roboto'; font-weight: bold;">200+</p>
			</div>

			<div id="claims">
				<p>Insurance claims</p><br>
				<p style="color: red; font-size: 2.3rem; font-family: 'Roboto'; font-weight: bold;">87%</p>
			</div>
		</section>

		<section class="promise">
			<div class="wrapper">
				<h1>Our Promise</h1>

				<p><span style="color: red;">W</span>e believe that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum doloremque impedit laudantium magnam eos quae ipsum, rem, dolorum saepe laboriosam ipsam nobis architecto debitis, vel aut provident tenetur perferendis, aliquid commodi magni sequi hic quia nemo! Nam odio fugiat, similique eum saepe. Laboriosam officiis delectus reiciendis, est tenetur voluptates ducimus! Ducimus enim dolor, eos id porro, amet culpa alias sunt reprehenderit necessitatibus deserunt eum. Sunt quia accusamus facilis quo, cum maiores nam illum sit quisquam, tempora fugit? Quod voluptate debitis voluptatum illo. Est, rerum sequi. Corporis atque incidunt placeat aliquam error veniam quis, minus voluptatem, qui, a pariatur voluptatibus, ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe labore aliquid magnam velit, nisi consequuntur!</p>
			</div>
		</section>
	</div>

	<section class="footer">
		<div class="wrapper">
			<div class="links">
				<div class="inner">
					<h1>Quick Links</h1>

					<a href="#">Home</a>
					<a href="#">About</a>
					<a href="#">Services</a>
					<a href="#">Job Openings</a>
					<a href="#">Gallery</a>
				</div>
			</div>

			<div class="social">
				<div class="inner" style="margin-left: 45px;">
					<h1>Social</h1>

					<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
					<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
					<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>

					<p id="msg">Give us some feedback!</p>
					<button name="msg">Send</button>
					<textarea name="msg" class="footer-textarea" cols="46" rows="5" placeholder="type here..."></textarea>
				</div>
			</div>

			<div class="contact">
				<div class="inner" style="margin-left: 20px;" class="wrap">
					<h1>Contact</h1>

					<p>(208)546-7827 - <span class="dark">Matt</span></p>
					<p>(208)546-7827 - <span class="dark">Keegan</span></p>
					<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
					<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
				</div>
			</div>
		</div>
		
		<div class="copyright">&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</div>
	</section>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

因为您的HTML文档中有

<div class="inner" style="margin-left: 45px;">

直接应用于该元素。

使用<div style="">内联编写CSS通常是不好的做法。

答案 1 :(得分：-1)

改为尝试

<div class="social">
            <div class="inner">
                <h1>Social</h1>

                <i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
                <i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
                <i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>

                <p id="msg">Give us some feedback!</p>
                <button name="msg">Send</button>
                <textarea name="msg" class="footer-textarea" cols="46" rows="5" placeholder="type here..."></textarea>
            </div>
相关问题
最新问题