Блог

Главная - Вопросы по программированию - Странный зазор между Div и телом

Странный зазор между Div и телом

#html #css #padding #quotes

Вопрос:

У меня есть этот простой html и css код

 @import url('https://fonts.googleapis.com/css?family=Open Sans:400italic');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    position: absolute; top: 50%; left: 50%; background: #121212; color: #fff;
    transform: translate(-50%, -50%); font-family: "Open Sans";
}

.container {
    max-width: 500px;
    font-style: italic;
    background: #353535;
    padding: 2em; line-height: 1.5em;
    border-left: 8px solid #00aeff;
}

.container span {
    display: block;
    color: #00aeff;
    font-style: normal;
    font-weight: bold;
    margin-top: 1em;
} 
 <body>

<div class="container">
    Creativity is just connecting things. When you ask creative people how they did something,
    they feel a little guilty because they didn't really do it, they just saw something.
    It seemed obvious to them after a while. That's because they were able to connect experiences
    they've had and synthesize new things.
    <span>Steve Jobs</span>
</div>

</body>

Но когда я просматриваю это на мобильных устройствах, остается немного неиспользуемого места

Слева и справа

Здесь, на этом изображении выше, слева и справа осталось немного места, как мне сделать так, чтобы осталось только 50 пикселей ?

Ответ №1:

Использование CSS для изменения тела Flex 

  body {
        background: #121212;
        color: #fff;
        font-family: "Open Sans";
        display: flex;
        align-items: center;
        justify-content: center;
        min-height:100vh;
    }
 
 @import url('https://fonts.googleapis.com/css?family=Open Sans:400italic');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: #121212;
    color: #fff;
    font-family: "Open Sans";
    display: flex;
    align-items: center;
    justify-content: center;
    min-height:100vh;
}


.container {
    max-width: 500px;
    font-style: italic;
    background: #353535;
    padding: 2em; line-height: 1.5em;
    border-left: 8px solid #00aeff;
}

.container span {
    display: block;
    color: #00aeff;
    font-style: normal;
    font-weight: bold;
    margin-top: 1em;
} 
 <body>

<div class="container">
    Creativity is just connecting things. When you ask creative people how they did something,
    they feel a little guilty because they didn't really do it, they just saw something.
    It seemed obvious to them after a while. That's because they were able to connect experiences
    they've had and synthesize new things.
    <span>Steve Jobs</span>
</div>

</body>
Метки: