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;} вроде работает

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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