Body contains white spaces after setting margin to 0 (Vanilla HTML And CSS)

huangapple go评论85阅读模式
英文:

Body contains white spaces after setting margin to 0 (Vanilla HTML And CSS)

问题

我正在尝试创建一个没有侧边空白的英雄图像。不知何故,即使在检查元素并发现是我的body的margin,并将其设置为0之后,仍然存在。

.body {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
}
.navigation {
    margin: 0;
    overflow: hidden;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 15px;
}

a {
    text-decoration: none;
    font-weight: light;
}

.navigation-inner {
    background: #eaeae4;
    border-radius: 5px;
    overflow: hidden;
}

.navigation-inner {
    font-size: 28px;
    display: flex;
}

.notification-round {
    background: rgba(240, 0, 0, .6);
    color: white;
    padding: 0 8px;
    border-radius: 50%;
    font-size: 16px;
    margin-left: 3px;
}

.navigation-link {
    padding: 15px 20px 10px 20px;
    display: inline-block;
    color: rgba(0, 0, 0, .7);
    transition: all .2s ease-in-out;
    border-bottom: 4px solid transparent;
}

.navigation-link:hover {
    background: rgba(50, 50, 0, .1);
    border-bottom-color: #8acc84;
}

.navigation-link > i {
    padding-right: 8px;
}

/*HERO*/

#home {
    background-size:
}

.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)), url("../images/furniture.jpg");
    height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}
.hero-text h1 {
    font-size: 50px;
}

希望这可以帮助您解决问题。

英文:

I am trying to make a hero image with no white spaces on the sides. For some reason I am still getting them even after inspecting the element and finding out that it was my body's margin, and setting that to 0

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.body {
font-family: &#39;Times New Roman&#39;, Times, serif;
margin: 0;
padding: 0;
}
.navigation {
margin: 0;
overflow: hidden;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 15px;
}
a {
text-decoration: none;
font-weight: light;
}
.navigation-inner {
background: #eaeae4;
border-radius: 5px;
overflow: hidden;
}
.navigation-inner {
font-size: 28px;
display: flex;
}
.notification-round {
background: rgba(240,0,0,.6);
color: white;
padding: 0 8px;
border-radius: 50%;
font-size: 16px;
margin-left: 3px;
}
.navigation-link {
padding: 15px 20px 10px 20px;
display: inline-block;
color: rgba(0,0,0,.7);
transition: all .2s ease-in-out;
border-bottom: 4px solid transparent;
}
.navigation-link:hover {
background: rgba(50,50,0,.1);
border-bottom-color: #8acc84;
}
.navigation-link &gt; i {
padding-right: 8px;
}
/*HERO*/
#home {
background-size:
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)), url(&quot;../images/furniture.jpg&quot;);
height: 400px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-text h1 {
font-size: 50px;
}

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Bill&#39;s Furniture Emporium&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;./css/one_page_website.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- NAV --&gt;
&lt;div class = &quot;navigation&quot;&gt;
&lt;header class=&quot;navigation-shadow&quot;&gt;
&lt;div class = &quot;navigation-inner&quot;&gt;
&lt;a href=&quot;#home&quot; class=&quot;navigation-link&quot; id=&quot;link&quot;&gt;HOME&lt;/a&gt;
&lt;a href=&quot;#gallery&quot; class=&quot;navigation-link&quot; &gt;GALLERY&lt;/a&gt;
&lt;a href=&quot;#contact&quot; class=&quot;navigation-link&quot; &gt;CONTACT&lt;/a&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;/div&gt;
&lt;!--HOMEPAGE--&gt;
&lt;div id=&quot;home&quot;&gt;
&lt;div class=&quot;hero-image&quot;&gt;
&lt;div class=&quot;hero-text&quot;&gt;
&lt;h1&gt;Bill&#39;s Furniture Emporium&lt;/h1&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

I tried inspecting the element and removing the margin and padding yet it didn't work

答案1

得分: 1

你应该同时设置根元素,尝试添加以下内容:

*{
  margin: 0;
  padding: 0;
}

在此处阅读更多信息点击这里

英文:

You should set the root also, try to add this:

*{
margin: 0;
padding: 0;
}

Read more here.

答案2

得分: 1

问题在于你在你的CSS中使用了一个类选择器:

.body

而你应该使用一个元素选择器:

body

从你的CSS中去掉点号,然后它应该可以工作。

英文:

The issue is that you are using a class selector in your css:

.body

when you should be using an element selector:

body

Remove the dot from your css and it should work.

huangapple
  • 本文由 发表于 2023年2月24日 09:54:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/75551970.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定