Не двигается картинка вверх CSS/HTML

Question

Не двигается картинка вверх CSS/HTML

Yuriy Mihalevich Ученик (224), на голосовании 4 года назад

Влево, вниз, вправо - двигается, а вверх не хочет, есть предположение что с контейнерами намудрил
Вот html и css

css:
*{
text-decoration: none;
}

*:before,
*:after{

}

.container{
width:100%;
max-width: 1084px;
margin:auto;

}
.header{

}
.header_inner{
display:flex;
justify-content: space-between;}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 5px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 23px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}

.button1 {
background-color: #fff;

color: #393939;
}

.button1:hover {
background-color: #393939;
color: white;
}

.button2 {
background-color: white;
color: black;

}

.button2:hover {
background-color: #393939;
color: white;
}

.button3 {
background-color: white;
color: black;

}

.button3:hover {
background-color: #393939;
color: white;
}

.button4 {
background-color: white;
color: black;

}

.button4:hover {background-color: #393939;color: white}

.intro_title{
display: block;
padding-top:229px;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 61px; font-style: normal; font-variant: normal; font-weight: 100; line-height: 26.4px; } h3 { font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; } p { font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 61px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } blockquote { font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 61px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; } pre { font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 61px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5714px;;
}
.right{
display: inline-block;
padding-bottom: 100px;
}
HTML:

Answer 1

Elepsis Eclipse Гений (67291) 5 лет назад

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

Никто не будет работать с кодом в таком виде... существует https://jsfiddle.net/

Yuriy MihalevichУченик (224) 5 лет назад

https://jsfiddle.net/0e52ushj/

Elepsis Eclipse Гений (67291) Если у .right убрать display: inline-block; картинка уйдет направо) inlint-block; схлопывает размеры блока до размеров его контента. А по умолчанию - у div стоит display: block — и он занимает всю доступную ширину.