1
<body>
    <img class="title" src="https://...">
</body>

Отдельно прописывая для класса title margin: 0px; не дает желаемого результата. Только так:

body {
    margin: 0px;
}

Проблема в том что сверху на фон должны ложиться еще несколько блоков с информацией и к ним будут применяться другие оступы

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>PPPP PPPP (@____) | Твиттер</title>
        <link type="icon-mask" href="http://abs.twimg.com/favicons/favicon.ico">
        <link rel="stylesheet" type="text/css" href="twitter.css">
    </head>
    <body>
        <div>
            <img class="title" src="https://pbs.twimg.com/profile_banners/926069676/1421322841/1500x500">
        </div>
    </body>
</html>

А так вовсе изображение не отображается:

<div class="title"></div>

.title {
  background: url(https://pbs.twimg.com/profile_banners/926069676/1421322841/1500x500);
}
10
  • 1
    Сперва попробуй сделать .title { margin: -10px }, может проблема в родительском элементе.
    – MichaelPak
    18 ноя 2015 в 8:43
  • если убирание margin с класса применяемого к элементу не помогает, значит дело не в это элементе, и отступы могут быть у родительских, причем как margin так и padding, поэтому нужно рассматривать конкретный случай с конкретной разметкой
    – Grundy
    18 ноя 2015 в 8:48
  • 1
    @MichaelPak, откуда число -10?
    – Grundy
    18 ноя 2015 в 8:48
  • 1
    @Grundy, рандомное число для проверки.
    – MichaelPak
    18 ноя 2015 в 8:55
  • @MichaelPak я не совсем понимаю, что здесь явл. родительским элементом для изображения. Код то пустой, только изображение и содержит. А с заданием отриц. значения отступов работает <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PPPP PPPP (@____) | Твиттер</title> <link type="icon-mask" href="abs.twimg.com/favicons/favicon.ico"> <link rel="stylesheet" type="text/css" href="twitter.css"> </head> <body> <div><img class="title" src="pbs.twimg.com/profile_banners/926069676/1421322841/…> </body> </html> 18 ноя 2015 в 8:56

4 ответа 4

5

Многие браузеры применяют свои, обобщенные правила CSS, которые работают по умолчанию. Рекомендуется первой строчкой в файле css прописывать * {margin:0; padding:0}. И тогда вы уже все контролируете при дальнейшей разработке проекта. Стаья по теме - http://linux.yaroslavl.ru/docs/www/css/reset_css.html

2

Пропишите контейнеру {font-size: 0px;}

1
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 19 ноя 2015 в 7:54
0

Ну второй вариант не работает потому-что не указана прямая ссылка на изображение. Прямая ссылка должна заканчиваться ее расширением типа img.jpg, а такие крутые площадки как твиттер скрывают их с помощью .htaccess или других крутых технологий, так что либо нужно найти фотохостинг с прямыми ссылками/арендовать сервер/пробовать на локалке.

Margin к картинке не работает вероятно потому что по умолчанию браузеры задают тегу body определенные отступы, например хром задает около 5-10px и что бы их убрать нужно прописывать обнуление отступов. Часто такие файлы называют reset.css и прописывают внутри что-то типа:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, acronym, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, thead, tr, th, td {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
}
0

чтобы убрать ВСЕ отступы, в стилях в начале пишу: *{margin: 0;padding: 0;} вроде работает

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.