nevalek

Как убрать отступ body

Recommended Posts

Начал верстать шаблон и сразу же непонятный момент.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
</head>
<body>
   <div class="container">
    <div class="header">
        <div class="product">
            <h1>Product Name</h1>
            <ul class="sps">
                <li>Put on this page information about your product</li>
                <li>A detailed description of your product</li>
                <li>Tell us about the advantages and merits</li>
                <li>Associate the page with the payment system</li>
            </ul>
        </div>
        <div class="banner"></div>
    </div>
    </div>
</body>
</html>

image.thumb.png.932dfa194c006137418e5c8be30d3917.png

Как убрать отступ, который сверху?

Share this post


Link to post
Share on other sites

h1 {margin: 0;}

ну и body {margin: 0; padding: 0;} хотя у нормалайза должно быть сброшено

А вообще, научитесь пользоваться DevTools

Share this post


Link to post
Share on other sites
1 час назад, Неугомонный сказал:

* {margin:0;padding:0}

Разве такой сброс стилей не является плохой практикой?

По теме, если правильно понял вопрос, то

h1 {margin-top: 0;}

 

Share this post


Link to post
Share on other sites
7 часов назад, Ryzex сказал:

Разве такой сброс стилей не является плохой практикой?

Так и есть

Share this post


Link to post
Share on other sites
13 часов назад, Неугомонный сказал:

И чем же плохо?

Тем и плохо, что например заказчик на часть страницы добавит параграф через админку, он то думает что у параграфа есть отступы, а вы их убрали для всех элементов.

Edited by relecteve

Share this post


Link to post
Share on other sites
04.08.2019 в 14:44, relecteve сказал:

Тем и плохо, что например заказчик на часть страницы добавит параграф через админку, он то думает что у параграфа есть отступы, а вы их убрали для всех элементов.

 

reset.css, например, тоже сбрасывает margin и padding у всех элементов, но делает это только для тех тегов, у которых они есть.
Заказчик, или контент менеджер, или кто там еще будет наполнять сайт, в большинстве случаев вообще не знают такие страшные слова как отступ у параграфа :) Да и в любом случае, для используемых тегов, все эти отступы будут переопределяться в стилях.

А плохая практика это потому, что " задает стили именно для всех элементов, для каких надо и каких не надо. А потом в отладчике появляются всякие сбивающие с толку паддинги у боди :)

Share this post


Link to post
Share on other sites
5 минут назад, AlexZaw сказал:

reset.css

Хватит использовать инструменты 2011 года 🙂 

мне так кажется)

Share this post


Link to post
Share on other sites
2 минуты назад, npofopr сказал:

Хватит использовать инструменты 2011 года

Я лишь привел пример :) Ну и, если честно, мне reset.css нравится, так как я могу быть 100% уверен что у всех элементов, во всех браузерах, стили будут одинаковыми и мне не придется учитывать особенности того или иного браузера.

Если есть лучшие варианты - буду рад ознакомиться.

Share this post


Link to post
Share on other sites

Да без разницы на самом деле, чем и как сбрасывать. Главное понимать, к чему это приведёт.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,439
    Total Members
    3,128
    Most Online
    Talomir
    Newest Member
    Talomir
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.