Nano Hash - криптовалюты, майнинг, программирование

div наследует margin-top своему родителю, а не внутри родителя

У меня есть макет div, а div с верхним полем не имеет верхнего края для своего родителя, но у родителя теперь есть верхнее поле. Как я могу сделать так, чтобы div class=box_container снова выровнялся с div class=container над ним?

jsfiddle

HTML

        <div class="right">
        <div class="container">
        </div>
        <div class="box_container">
            <div class="boxwrap">
                <div class="box" ></div>    
                <div class="box" ></div>    
                <div class="box" ></div>    
                <div class="box" ></div>    
            </div>
        </div>
    </div>

CSS

.right{
height: 100%;
width: 250px;
background-color: blue;
position:relative;
float: right;
}

.container{
height: 225px;
width: 250px;
background-color: lightsteelblue;
}

.box_container{
height: 140px;
width: 250px;
background-color: darkslategray;
clear: both;
}


.boxwrap{
width: 245px;
height: 50px;
margin-left: 5px;
margin-top:20px;
clear: both;
}

.box{
height: 50px;
width: 50px;
margin-left: 5px;
margin-right: 5px;
float: left;
background-color: red;
}
30.05.2013

Ответы:


1

Это известно как "сжатие полей". Простое решение здесь состоит в том, чтобы вместо этого использовать padding-top, но когда это не подходит, вы можете сделать так, чтобы поля не свисали из контейнера, задав контейнеру верхнюю границу или какой-нибудь верхний отступ. Например.

.box_container {
    padding-top: 1px;
}
30.05.2013

2

Попробуйте использовать padding вместо margin — это то, что вам нужно? Взгляните на эту скрипку - http://jsfiddle.net/skip405/ALuqW/

30.05.2013
  • круто, но до того, как я использовал margin-top для class=box, это сработало с margin-top 30.05.2013
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..