Ну очень нубский вопрос

Asked by manut,
January 5, 2013

Followers 0

Question

manut

Posted January 5, 2013

- Report
- Share

Posted January 5, 2013

Даже стыдно спрашивать, но никак не могу понять. Такой вот тривиальный пример.


<div class="main">
<div class="block"></div>
</div>


body {
margin: 0;
padding: 0;
}
.main{
width: 400px;
height: 400px;
background-color: #272822;
}
.block{
background-color: #982722;
width: 100px;
height: 100px;
margin: 40px;
}

почему в данном случае margin-left отображается корректно, а margin-top как бы вылазит и отодвигает родительский блок от области просмотра?

Quote

Link to comment

Share on other sites

1 answer to this question

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

× Pasted as rich text. Paste as plain text instead

Only 75 emoji are allowed.

× Your link has been automatically embedded. Display as a link instead

× Your previous content has been restored. Clear editor

× You cannot paste images directly. Upload or insert images from URL.

Insert image from URL

Followers 0

Go to question listing

Similar Content
- Container в Bootstrap
  By Marri.nich
  
  Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой:
  <header> <nav> <div class="container"> <ul class="menu"> <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li> ... <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li> </ul> </div> </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю.
  Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана.
  Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px.
  Дополнение: тегу nav в стилях задан width: 100%.
  Вопрос:
  1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px?
  2. Почему margin'ы работают не так как я ожидаю?)
  Если я что-то неясно или не совсем корректно изложила прошу понять и простить :)))
  Спасибо за ответы.
- Не всегда работает margin-top
  By Ubhra
  
  Добрый день.
  Использовал плитку из masonry.pkgd.min.js. Между блоками должен быть промежуток 20 px. Но он есть не всегда и не во всех браузерах. Опера все отрисовывает правильно, хром иногда без промежутков, а мозила почти при каждом F5 выдает разные результаты. С чем это связано и можно ли починить?
  .prev_block{ width:300px; background-color:#a3bd6f; margin-top:20px; }
- Выравнивание блоков/элементов
  By Nerwoid
  
  Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin". Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ?
  
  Вот: макет:
  Мой сайт
- Спозиционировать элемент в нужное место по горизонтали, не выводя из потока
  By Launder
  
  Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в "строке" с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте).
  Для второго элемента указано свойство:
  padding-left: calc(50% - 15rem); /* тут может быть и 150px*/ При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше - отступ больше),
  если в выражении использовать пиксели, то элемент уйдёт вправо при большом шрифте (просто левый элемент увеличится).
  И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center... Можно было бы как-то изловчится с паддингами (что-то вроде 15rem - 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом - не сдвигать.
  Была идея как-то сделать, чтоб паддинг и марджин взаимно компенсировали друг друга, когда нам надо, а когда не нужно паддинг, стал меньше нуля, и исчез, но на практике мне не удалось это реализовать.
  В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1 {margin-right: calc(15rem - 150px)}, что при маленьких шрифтах будет сдвигать блок block-center влево, но при больших будет сдвигать вправо и как это компенсировать - не понятно.
  В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ - нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин - будет действовать в обе стороны, а паддинг - в одну, но только вправо, а мне нужно налево.
  В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это "не туда" скомпенсировать не может, поскольку сам вылезает туда же, в "не туда"...
  Каким образом приручить эти элементы?
- Проблема в адаптивной верстке
  By Masya
  
  Здравствуйте, я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в max-width ,при заданной ширине, не хочет работать изменение отступов (padding и margin), хотя flex-direction: column; работает. Жуткое ощущение глупой ошибки ,которую не могу найти. Заранее спасибо за помощь.
  Ниже HTML и CSS код:
  <header>
             <div class="header">
                 <div class="wrap">
                     <div class="logo header_left">
                         <a href="#">
                             <img src="images/logo.png" alt="Логотип">
                         </a>
                     </div>
                     <div class="header_right">
                         <div id="topmenu">
                             <p>
                                 <a href="#">About</a>
                                 <span>/</span>
                                 <a href="#">Blog</a>
                                 <span>/</span>
                                 <a href="#">Contact</a>
                                 <span>/</span>
                             </p>
                         </div>
                         <div id="social">
                             <a class="twitter" href="#"></a>
                             <a class="vimeo" href="#"></a>
                             <a class="facebook" href="#"></a>
                             <a class="instagram" href="#"></a>
                             <a class="dribbble" href="#"></a>
                             <a class="reddit" href="#"></a>
                         </div>
                     </div>
                 </div>
             </div>
         </header>
  ——————————————————————————————————————————————————--
  #container {
     margin: 0 auto;
  }
  #container .header {
     border-bottom: 1px solid #bfbfbf;
     box-shadow: 0 0 3px #dbdbdb;
     padding-top: 6px;
  }
  #container .header .wrap {
     display: flex;
     justify-content: space-between;
     padding: 0;
  }
  @media (max-width: 650px) {
  .header .wrap {
  flex-direction: column;
  padding: 0 3px;
  margin-bottom: 5px;
  }
  
  .header #socials {
  margin-left: 5px;
  }
  
  .header #socials a:last-child {
  margin-right: 2px;;
  }
  }
  #container .header .header_left {
     align-self: center;
  }
  #container .header .header_right {
     display: flex;
     justify-content: space-between;
  }
  #container #topmenu {
     color: #8e8e8e;
     padding-top: 6px;
  }
  #container #topmenu a {
     color: #8e8e8e;
     text-decoration: none;
  }
  #container #topmenu a:hover {
     color: #dd5555;
  }
  #container #social {
     display: flex;
     margin-left: 20px;
     margin-right: 50px;
  }
  #social a {
     margin-top: 9px;
     margin: 8px 10px;
  
  }
  .twitter {
     background: url("../images/twitter_un.png") no-repeat;
     height: 11px;
     width: 13px;
     cursor: pointer;
  }
  .twitter:hover {
     background: url("../images/twitter.png") no-repeat;
     height: 11px;
     width: 13px;
  }
  .dribbble {
     background: url("../images/dribbble_un.png") no-repeat;
     height: 13px;
     width: 13px;
     cursor: pointer;
  }
  .dribbble:hover {
     background: url("../images/dribbble.png") no-repeat;
     height: 13px;
     width: 13px;
  }
  .vimeo {
     background: url("../images/vimeo_un.png") no-repeat;
     height: 12px;
     width: 13px;
     cursor: pointer;
  }
  .vimeo:hover {
     background: url("../images/vimeo.png") no-repeat;
     height: 12px;
     width: 13px;
  }
  .facebook {
     background: url("../images/facebook_un.png") no-repeat;
     height: 13px;
     width: 7px;
     cursor: pointer;
  }
  .facebook:hover {
     background: url("../images/facebook.png") no-repeat;
     height: 13px;
     width: 7px;
  }
  .instagram {
     background: url("../images/instagram_un.png") no-repeat;
     height: 12px;
     width: 12px;
     cursor: pointer;
  }
  .instagram:hover {
     background: url("../images/instagram.png") no-repeat;
     height: 12px;
     width: 12px;
  }
  .reddit {
     background: url("../images/reddit_un.png") no-repeat;
     height: 11px;
     width: 13px;
     cursor: pointer;
  }
  .reddit:hover {
     background: url("../images/reddit.png") no-repeat;
     height: 11px;
     width: 13px;
  }

Обсуждения
- Вёрстка футера на движке Xenforo
  
  By Mondeus · Posted November 13, 2023
  
  Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }
- Примеры верстки
  
  By torsar · Posted November 3, 2023
  
  Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
- Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?
  
  By Katerina23 · Posted October 25, 2023
  
  Да, подходит. Спасибо.
- Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?
  
  By Switch74 · Posted October 25, 2023
  
  <input type="number">
- Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?
  
  By Katerina23 · Posted October 25, 2023
  
  Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.

Sign In

Ну очень нубский вопрос

Question

manut

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

uuu

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information