Разница между
— элементы, которые относятся к одной группе называемой строчно-блочной. Такие элементы могут иметь разные размеры, однако браузер всегда отображает их горизонтально подобно тексту. В этой главе мы узнаем о различных группах элементов в соответствии с тем, как они выкладываются на странице.
Для начала давайте разберём, как отображать один элемент под другим по вертикали. Мы в основном должны сказать браузеру: «Эй, мы хотим контейнер, который может стыковаться вертикально». К счастью, это тег контейнера известен как
Чтобы увидеть как работают элементы
Согласно приведённым выше условиям, HTML будет выглядеть следующим образом.
Посмотрим на это в браузере.
Похоже на один большой прямоугольник. Как насчёт отделить теги
Я добавил свойство margin-bottom (выделено выше), чтобы отделить каждый
Отлично! Браузер отображает эти «блоки» один под другим, в отличие от нашего предыдущего примера с формой, где элементы выводились в одну строку.
В чём различие? Когда дело доходит до отображения тегов, браузер распознаёт три группы элементов:
Строчные элементы не вызывают перевода на новую строку и показывают один элемент рядом с другим по горизонтали. Блочные элементы устанавливаются как блоки, которые укладываются по верхней части друг друга и никогда не отображаются рядом по горизонтали, если мы не используем магические трюки в CSS (о которых узнаем в следующей главе). Строчно-блочные действуют в качестве строчных элементов (отображаются рядом друг с другом), но отличаются от них тем, что им можно задать размер. К примеру, поле
может отображаться как большой прямоугольник, но при этом занять пространство за пределами одной строки текста.
Позвольте мне поделиться с вами некоторыми примерами элементов, которые можно классифицировать в соответствии с одной из этих трёх групп.
Браузер отобразит в одну линию:
Однако можно изменить это поведение, добавив одну строку в CSS:
Для этого примера мы используем
Вообще, хорошей идеей будет не злоупотреблять тегом
С нашими новыми знаниями о блоках давайте переделаем код нашей формы так, чтобы поля формы и их описания красиво отображались друг под другом.
Это выглядит чуть сложнее, но единственное что мы сделали, так это добавили теги
Ещё раз, давайте сравним новый (справа) и старый код (слева).
А теперь посмотрим, как новый код отображается в браузере!
What is the difference between
What is the difference between
Can they be used interchangeably?
Because I am facing problem that, for margin not working but for the
7 Answers 7
p and div elements are block level elements where span is an inline element and hence margin on span wont work. Alternatively you can make your span a block level element by using CSS display: block; or for span I would prefer display: inline-block;
Apart from that, these elements have specific semantic meaning, div is better referred for a block of content having different nested elements, p which is used for paragraphs, and span is nothing but an empty element, hence keeping SEO in mind, you need to use right tag for right thing, so for example wrapping the text inside div element will be less semantic than wrapping it inside a p
should contain paragraghs of text, a
This is how they should be used semantically, the styling of them however using CSS is up to you.
As a web developer, I can’t help but feel all these guidelines are incredibly misleading in the year 2015.
Sure, a «p» tag was at one point designed for paragraph use. but in 100% of my applications, designs, and just day-to-day general development, we’ve encountered nothing but limitations imposed by the «p» tag. it offers no benefit in today’s internet.
I would say yes, «p» is a descriptive element, and for that reason if that’s all it did; «describe something», I’d be all for it. but it DOESN’T just describe the content, it straight up ALTERS the content, which while already being a limitation in itself, isn’t all it does, it also LIMITS the content. Why anyone in their right mind would purposefully embrace a limiting building block when it comes to web development is beyond me. From a design standpoint it doesn’t make sense. From a structural standpoint it doesn’t make sense. From any from of DOM manipulation PERIOD, it doesn’t make sense.
We’ve all-together stopped using the «p» tag except where we are absolutely forced to (client word-press post implementations, silly things like that, for example). There is no excuse as to why we can’t describe nearly everything with well-named classes and ID’s, so we see zero reason to have to bow to «standards» that add no benefit whatsoever, and in fact HINDER every piece of the puzzle. The «p» tag is of no help to the developer, the end-user, nor to modern search engines. In a nutshell. «p» tag is all but deprecated in even remotely complicated implementations (and with very good reason), don’t let the comments of these standard’s nazi’s control how you display your content!
And yes, I do appreciate our current web standards, and things like still have their place, even offering up abilities to do things with some modern browsers you can’t accomplish with a container, but it’s just that this one in particular, the broken element «p», as a piece of a restructured and modernized HTML. should have been left in the grave where it belongs. this is a generation of web where paragraphs aren’t even paragraphs forever anymore. the blocks literally change. it’s just plain outdated and impractical.
Правила хорошего тона в вёрстке?
Есть много мелких вопросов типа:
1. В каких случаях имеет смысл писать текст прямо в div
А в каких оборачивать в p или span
2. span можно задать как block но ведь есть же div но им говорят не злоупотреблять, когда лучше, обосновано span block а когда div?
3. Постоянно сталкиваюсь с конструкциями вида:
Вроде всё правильно но чем дольше работаю тем больше кажется что это антипаттерн какой-то потому что по ходу работы надо проектом часто возникает необходимость иметь в блоке 2 и более ссылок по-разному оформленных.
И т.п. где об этом можно почитать?
Про БЭМ уже сказали, а про спан и див коротко: должны быть общее определение всяких дивов и спанов, т.е если я буду читать ваш код и увижу span, я пойму что это строчный элемент, мне будет странно, если он окажется блочным.
Обычно (лично я) беру текст в спан, чтобы придать ему отличительные черты, от другого такого же текста. Например, перекрасить в другой цвет или увеличить размер.
Про ваш тег p, лично я любой текст, который вложен в статью или блок с текстом, всегда обозначаю через этот тег. Выделил это для того, чтоб не было желания писать следующее: Текст
Если вам нужно чтобы каждая ссылка в меню была по-разному оформлена, то все равно все так же и будет записываться, с небольшой корректировкой:
В чем разница между
В чем разница между
Можно ли их использовать взаимозаменяемо?
Потому что я столкнулся с проблемой, что для поля не работает, но для
p и div являются элементами уровня блока, где span является встроенным элементом и, следовательно, маржа на пробел не работает. В качестве альтернативы вы можете сделать span элемент уровня блока с помощью CSS display: block; или для span Я бы предпочел display: inline-block;
должен содержать параграфы текста, a
Вот как они должны использоваться семантически, их стиль, однако использование CSS зависит от вас.
Как и другие ответили. div и p являются «блочными элементами» (теперь переопределены как Flow Content) и span являются «встроенным элементом» (Разъяснение содержимого). Да, вы можете изменить представление этих элементов по умолчанию, но есть разница между «потоком» и «блоком» и «фразировкой» по сравнению с «встроенным».
Элемент, классифицированный как поток, может использоваться только там, где ожидается текущее содержимое потока, и элемент, классифицированный как фразинг-контент, может использоваться там, где ожидается выражение фразирования. Так как все словосочетание представляет собой содержимое потока, фрикционный элемент также может использоваться в любом поточном содержимом. Спецификации предоставляют более подробную информацию.
Как веб-разработчик, я не могу не чувствовать, что все эти рекомендации невероятно вводят в заблуждение в 2015 году.
div, span и display — Основы HTML, CSS и веб-дизайна
В этом уроке мы познакомимся с принципами, по которым элементы выводятся на страницу и получают определённый размер.
display
Здесь к слову display можно относиться как к глаголу: to display — показывать, выводить на экран.
Всего у этого свойства 20 возможных значений, но прямо сейчас остальные не так важны.
Разные браузеры могут задавать разные стили по умолчанию, и иногда эти стили могут отличаться. Поэтому одна и та же страница может выглядеть по-разному в разных браузерах. Это в основном касается размеров и отступов. Для решения этой проблемы существуют так называемые CSS Reset — наборы CSS-стилей, которые «сбрасывают» браузерные стили.
div & span
Элемент p имеет семантическое значение. Он определяет абзац текста.
Такой элемент не стоит использовать там, где это по смыслу не имеет значения. Например, не стоит помещать в p меню с кнопками для навигации по сайту.
Два самых используемых элемента — div и span — не имеют семантического значения. Они нужны исключительно для структуры и стилей.
Конечно, вы можете изменить эти свойства в своём CSS, но лучше так не делать. В целом, лучше не менять базовые свойства у типов элементов, а добавлять классы по необходимости.
div обычно используется для определения какого-то крупного блока на странице. А span — для небольшого элемента на строке.
Блочная модель
Каждый элемент на странице — прямоугольник. Это, пожалуй, самое важное утверждение в вёрстке веб-страниц. В примере в начале этого урока это можно заметить: мы задали параграфам фоновый цвет, и стало видно: каждый параграф — это прямоугольник.
У каждого прямоугольника есть несколько свойств, влияющих на размер:
Давайте сделаем элемент, в котором явно видно все эти части:
See the Pen Div Box by Hexlet (@hexlet) on CodePen.
Сколько же места требуется всему элементу? Нужно сложить показатели:
Границы и отступы можно задать свои для каждой из сторон:
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
