Всем привет, сделал width согласно тому, что на блоке написано, и margin 10px, но у меня лесенка все равно, почему?

Question

Всем привет, сделал width согласно тому, что на блоке написано, и margin 10px, но у меня лесенка все равно, почему?

Fantast Профи (979), закрыт 1 день назад

Вот код

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Макет</title> 
    <link rel="stylesheet" href="maket3.css"> 
</head> 
<body> 
    <div id="px940"> 
        <p>940 px</p> 
    </div> 
    <div id="px460"> 
        <p>460 px</p> 
    </div> 
    <div id="px460-2"> 
        <p>460 px</p> 
    </div> 
    <div id="px300"> 
        <p>300 px</p> 
    </div> 
    <div id="px300-2"> 
        <p>300 px</p> 
    </div> 
    <div id="px300-3"> 
        <p>300 px</p> 
    </div> 
    <div id="px220"> 
        <p>220 px</p> 
    </div> 
    <div id="px220-2"> 
        <p>220 px</p> 
    </div> 
    <div id="px220-3"> 
        <p>220 px</p> 
    </div> 
    <div id="px220-4"> 
        <p>220 px</p> 
    </div> 
    <div id="px140"> 
        <p>140 px</p> 
    </div> 
    <div id="px140-2"> 
        <p>140 px</p> 
    </div> 
    <div id="px140-3"> 
        <p>140 px</p> 
    </div> 
    <div id="px140-4"> 
        <p>140 px</p> 
    </div> 
    <div id="px140-5"> 
        <p>140 px</p> 
    </div> 
    <div id="px140-6"> 
        <p>140 px</p> 
    </div> 
</body> 
</html>

 body { 
    width: 960px; 
} 
p { 
    background-color: rgb(152, 7, 65); 
    margin: 10px; 
    padding: 30px; 
    color: #efefef; 
    text-align: center; 
    font-family: Arial, Verdana, sans-serif; 
} 
div { 
    display: inline-block; 
} 
#px940 { 
    width: 940px; 
} 
#px460 { 
    width: 460px; 
} 
#px460-2 { 
    width: 460px; 
} 
#px300 { 
    width: 300px; 
} 
#px300-2 { 
    width: 300px; 
} 
#px300-3 { 
    width: 300px; 
} 
#px220 { 
    width: 220px; 
} 
#px220-2 { 
    width: 220px; 
} 
#px220-3 { 
    width: 220px; 
} 
#px220-4 { 
    width: 220px; 
} 
#px140 { 
    width: 140px; 
} 
#px140-2 { 
    width: 140px; 
} 
#px140-3 { 
    width: 140px; 
} 
#px140-4 { 
    width: 140px; 
} 
#px140-5 { 
    width: 140px; 
} 
#px140-6 { 
    width: 140px; 
}

Дополнен 1 месяц назад

вот что выходит

Answer 1

Данил Ласый Просветленный (49441) 1 месяц назад

margin-left:10px

FantastПрофи (979) 1 месяц назад

не работает(

Данил ЛасыйПросветленный (49441) 1 месяц назад

На чём проверяешь?

Данил ЛасыйПросветленный (49441) 1 месяц назад

А, margin:0. Чтобы вообще отступов не было не было. Можно так попробовать. Но я код не проверял. Говорю наугад

Fantast Профи (979) Данил Ласый,

мне вообще это помогло, я не знаю почему именно 0.8%

Данил ЛасыйПросветленный (49441) 1 месяц назад

Ты гений. Вот что значит ересь какую-нибудь человеку сказать. Сразу всё у него получится

Answer 2

Резидент Казахстана Оракул (69282) 1 месяц назад

Вопросик у меня..
Для чего это ?

Математика: любые блоки в сумме + внешние отступы меньше самого длиного блока..

FantastПрофи (979) 1 месяц назад

просто, смотрю как блоки работают

Резидент Казахстана Оракул (69282) Дима Травин, флексами проще..inline-block это не то

Answer 3

Во первых, ты не там ставишь отступы и не там делаешь раскраску. Во вторых, для inline-block пробелы между блоками имеют значение.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Макет</title>
    <link rel="stylesheet" href="maket3.css">
</head>
<body>
    <div class="px940"><p>940 px</p></div>
    <div class="px460"><p>460 px</p></div><div class="px460"><p>460 px</p></div>
    <div class="px300"><p>300 px</p></div><div class="px300"><p>300 px</p></div><div class="px300"><p>300 px</p></div>
    <div class="px220"><p>220 px</p></div><div class="px220"><p>220 px</p></div><div class="px220"><p>220 px</p></div><div class="px220"><p>220 px</p></div>
    <div class="px140"><p>140 px</p></div><div class="px140"><p>140 px</p></div><div class="px140"><p>140 px</p></div><div class="px140"><p>140 px</p></div><div class="px140"><p>140 px</p></div><div class="px140"><p>140 px</p></div>
</body>
</html>

 body {
    width: 960px;
}
p {  
    padding: 30px;
    color: #efefef;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;  
}  
div {  
    display: inline-block;
    box-sizing: border-box;
    background-color: rgb(152, 7, 65);
    margin: 10px;
}  
.px940 { width: 940px; }
.px460 { width: 460px; }
.px300 { width: 300px; }
.px220 { width: 220px; }
.px140 { width: 140px; }

Работающий пример: https://jsfiddle.net/7evc98hj/

Но такие вещи надо делать не инлайнами, а флексами: https://jsfiddle.net/7evc98hj/1/