• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Elementy na stronie obojętne na margin: 0 i padding: 0

VPS Starter Arubacloud
0 głosów
198 wizyt
pytanie zadane 6 marca 2020 w HTML i CSS przez tgv Użytkownik (890 p.)

W projekcie strony w selektorze css * mam ustawione marginesy i padding na 0. Mimo tego elementy div jak np. newsletter i footer mają marginesy. Nie mogę ich w żaden sposób usunąć. Co jest nie tak?

Live share do mojego projektu:

https://prod.liveshare.vsengsaas.visualstudio.com/join?114E9D21D128C44ABF78095CED8B93A26B93

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Title -->
    <title>Digital Nomads - All you need to work remotely, make money, rock your social media and cheap travel</title>

    <!-- Meta -->
    <meta name="description" content="The best articles to make easy money and work from home for a Digital Nomads. Boost your social media channels with us and travel around the world." />
    <meta name="author" content="SF" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="keywords" content="social media, make money, work remote, cheap travel, work at home, easy money, money online, make money fast, rock your social media, social media guru, digital nomads, nomads, enomads, instagram, facebook, pinterest, tik tok, youtube" />
    
    <!-- Charset -->
    <meta charset="utf-8" />

    <!-- External CSS -->
    <link href="https://fonts.googleapis.com/css?family=Cardo&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Vollkorn&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Vollkorn+SC&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Simonetta&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="https://kit.fontawesome.com/6e14179572.js"crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script>
      $(document).ready(function() {
        $('.menu').click(function() {
          $('nav').slideToggle('100');
        });
      });
    </script>
  </head>
<body>
  <nav>
    <h1 class="brand"><a href="#">Enomad</a></h1> 
      <ul>
        <li><a href="money.html">Make money online</a></li>
        <li><a href="management.html">Money management</a></li>
        <li><a href="social.html">Rock your social media</a></li>
        <li><a href="travel.html">Cheap travel</a></li>
      </ul>
    </ul>
    <div style="clear: both"></div>
  </nav>
  <div class="responsive-bar">
    <h3 class="brand"><a href="#">Enomad</a></h3>
    <h4 class="menu">Menu</h4>
    <div style="clear: both"></div>
  </div>
<div class="banner">
  <div class="container">
    <h1>Money management</h1>
    <p>z
    Do you want to save money and pay off debt? Try this top money management tips to get your finances in order.
    </p>
    <div class="search">
      <form action="https://google.com">
        <input type="text" class="input-res" name="search" placeholder="Search for articles..." ><input type="submit" value="Submit">
      </form>
    </div>
  </div>
</div>
<div class="bg-stretch" id="stretch3"></div>
  <div class="container">
    <div class="help">
      <h2>What is your main problem?</h2>
    <div class="cards">
      <section class="card">
        <picture class="thumbnail"><img src="img/savemoneytips.jpg" alt="savemoneytips"></picture>
        <h3 class="help-item-title"><a href="#">50 top saving money tips</a></h3>
        <p>How to save money without much effort and even a small salary? Here are some ways everyone can benefit, regardless of earnings.
        </p>
      </section>
      <section class="card">
        <picture class="thumbnail"><img src="img/coupons.jpg" alt="coupons"></picture>
        <h3 class="help-item-title"><a href="#">20 best coupon websites</a></h3>
        <p>All promotions and sales available online. Discount codes and coupons for hundreds of online stores. Find your store and take advantage of discounts!</p>
      </section>
      <section class="card">
        <picture class="thumbnail"><img src="img/groceryapps.jpg" alt="coupons"></picture>
        <h3 class="help-item-title"><a href="#">Smart apps for save money on groceries</a></h3>
        <p>Don't waste food and save money! Here are the best applications for everyday use that everyone should know.</p>
      </section>
    </div>
  </div> 
<div class="coming-up">
  <h2>Learn more about</h2>
  <div class="coming-up-block">
    <div class="coming-up-item">
      <div class="coming-up-inner">
        <div class="coming-up-ico">
          <img src="img/icons/gadgets.png">
        </div>
          <div class="coming-up-name">
            <a href="#">Save on gadgets</a>
          </div>
      </div>
    </div>
    <div class="coming-up-item">
      <div class="coming-up-inner">
        <div class="coming-up-ico">
          <img src="img/icons/meal.png">
        </div>
          <div class="coming-up-name">
            <a href="#">Plan your meals</a>
          </div>
      </div>
    </div>
    <div class="coming-up-item">
      <div class="coming-up-inner">
        <div class="coming-up-ico">
          <img src="img/icons/subscription.png">
        </div>
          <div class="coming-up-name">
            <a href="#">Subscription services</a>
          </div>
      </div>
    </div>
    <div class="coming-up-item">
      <div class="coming-up-inner">
        <div class="coming-up-ico">
          <img src="img/icons/transport.png">
        </div>
          <div class="coming-up-name">
            <a href="#">Cut transport costs</a>
          </div>
      </div>
    </div>
    <div class="coming-up-item">
      <div class="coming-up-inner">
        <div class="coming-up-ico">
          <img src="img/icons/yoga.png">
        </div>
          <div class="coming-up-name">
            <a href="#">Reduce entertainment expenses</a>
          </div>
      </div>
    </div>  
    <div class="coming-up-item">
        <div class="coming-up-inner">
          <div class="coming-up-ico">
          <img src="img/icons/travel.png">
          </div>
            <div class="coming-up-name">
              <a href="#">Budget travel</a>
            </div>
        </div>
      </div>  
     </div>
  <div>
</div>
<div id="stretch5" class="newsletter-opt-in"> 
    <div class="frame">
      <h2>Join our<span class="vip">VIP list</span></h2>
      <p class="vip-list-paragraph">For the exclusive tips, free resources and best tips</p>
      <form action="http://eepurl.com/gUrUvD">
        <input type="button" value="SUBSCRIBE">
      </form>
    </div>
</div>
<div class="most-popular">
  <h1>Most popular articles</h1>
</div>
<div class="article-section">
    <div class="article-1">
        <a href="" class="card">
            <div class="thumb" style="background-image: url();"></div>
            <article>
                <h1>Post title</h1>
                <span>Author</span>
            </article>
        </a>
    </div>
    <div class="article-2">
        <a href="" class="card">
            <div class="thumb" style="background-image: url();"></div>
            <article>
                <h1>Post title</h1>
                <span>Author</span>
            </article>
        </a>
    </div>
    <div class="article-3">
        <a href="" class="card">
            <div class="thumb" style="background-image: url();"></div>
            <article>
                <h1>Post title</h1>
                <span>Author</span>
            </article>
        </a>
    </div>
    <div class="article-4">
        <a href="" class="card">
            <div class="thumb" style="background-image: url();"></div>
            <article>
                <h1>Post title</h1>
                <span>Author</span>
            </article>
        </a>
    </div>
    <div class="article-5">
        <a href="" class="card">
            <div class="thumb" style="background-image: url();"></div>
            <article>
                <h1>Post title</h1>
                <span>Author</span>
            </article>
        </a>
    </div>
    <div class="article-6">
        <a href="" class="card">
            <div class="thumb" style="background-image: url();"></div>
            <article>
                <h1>Post title</h1>
                <span>Author</span>
            </article>
        </a>
    </div>
</div>
<div class="footer">
  <div class="footer-social-icons">
    <ul>
      <li><a href="#" target="blank"><i class="fab fa-facebook"></i></a></li>
      <li><a href="#" target="blank"><i class="fab fa-instagram"></i></a></li>
      <li><a href="#" target="blank"><i class="fab fa-twitter"></i></a></li>      
      <li><a href="#" target="blank"><i class="fab fa-pinterest-square"></i></a></li>  
    </ul>
  </div>
<div class="footer-menu-one">
  <div>
    <ul>
      <li><a href="#">About us</a></li>
      <li><a href="#">Make money online</a></li>
      <li><a href="#">Money management</a></li>
      <li><a href="#">Rock your social media</a></li>
      <li><a href="#">Cheap Travel</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
<hr>
<div class="footer-bottom">
  <p>Design by:<a href="#">SF Studio</a></p>
</div>
</body>
</html

 

komentarz 6 marca 2020 przez Comandeer Guru (604,400 p.)
A może mógłbyś to wrzucić na codesandbox albo stackblitz? IMO będzie to mniej kłopotliwe niż konieczność posiadania VSC z konkretnym dodatkiem.
komentarz 6 marca 2020 przez Mariusz08 Maniak (62,300 p.)
Comandeer, posiadamy linka do JSFiddle/Codepen, myślę że powinno wystarczyć ;)
1
komentarz 6 marca 2020 przez Comandeer Guru (604,400 p.)

@Mariusz08, gdzie masz tego linka?

Edit: a, mówisz o tych dwóch prawie działających przyciskach, wyglądających, jakby się layout zepsuł? Cóż, nie starczą, bo CSS jest w zewnętrznym pliku, który nie został wrzucony ;)

komentarz 6 marca 2020 przez tgv Użytkownik (890 p.)
edycja 6 marca 2020 przez Comandeer
komentarz 6 marca 2020 przez Mariusz08 Maniak (62,300 p.)
http://prntscr.com/rcld37

No ten zwykły preview.

Tak swoją drogą to ten kod chyba nie jest kompletny bo nie zawiera CSS :P

4 odpowiedzi

+1 głos
odpowiedź 14 marca 2020 przez frostify Mądrala (5,640 p.)

Wewnątrz footer-botom p znajduje się padding-bottom:

.footer-bottom p {
padding-bottom: 0.9em;
}

Aczkolwiek moim zdaniem bez tego padding-bottom-u wygląda źle.

Div z klasą "newsletter-opt-in" zaś ma także id="Stretch5" do którego przypisano wysokość: 30em.

Ona ustanawia wysokość danego diva, co sprawia, że pod frame znajduje się jeszcze pewna przestrzeń.

Usuń height: 30em dla #stretch5, ale nie będzie to wyglądać dobrze.

Podobnie height dla frame ustanawia niejako marginesy.

Bo jeśli np stworzysz div, wewnątrz napiszesz tytuł, nadasz tytułowi margines top i bottom 5rem załóżmy, tytuł będzie miał powiedzmy line-height 2rem, to cały div wyniesie 12rem wysokości z tytułem wyśrodkowanym w pionie.

Ten sam efekt możesz osiągnąć nadając divowi 12 rem height, i dla tego samego tytułu padding-top: 5rem, a wysokość diva 12 rem sprawi, że jeszcze 5 rem pod tytułem będzie się wyświetlać wolnej przestrzeni.

0 głosów
odpowiedź 6 marca 2020 przez Comandeer Guru (604,400 p.)

Hasło-klucz: margin collapsing. Np. stopka jest odsunięta od dolnej krawędzi strony między innymi dlatego, że akapit wewnątrz .footer-bottom ma margines, który po prostu przechodzi na rodzica.

0 głosów
odpowiedź 6 marca 2020 przez tgv Użytkownik (890 p.)

Podrzucam HTML + CSS 

 

https://jsfiddle.net/9ugkpL3d/

0 głosów
odpowiedź 6 marca 2020 przez tgv Użytkownik (890 p.)
Czegoś tu nie rozumiem. Problem z marginesami i z dolną częścią footera pojawia się tylko na jednej podstronie a CSS jest ten sam.

Podobne pytania

0 głosów
1 odpowiedź 516 wizyt
0 głosów
1 odpowiedź 127 wizyt
pytanie zadane 4 marca 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)
0 głosów
1 odpowiedź 242 wizyt

92,839 zapytań

141,780 odpowiedzi

320,855 komentarzy

62,171 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...