Почему тег html div с тегом p внутри него находится по-другому, чем один с тегом img внутри него?

Я написал следующий код во время работы над Codecademy.com. В основном у меня есть куча круглых контейнеров, созданных с помощью тегов <div>. Все контейнеры просто сидят в аккуратном ряду, когда пуст. Когда я добавил изображения внутри некоторых из <div> s, это не повлияло на интервал. Однако, когда я добавил текст в тег <p> внутри одного из контейнеров <div>, он столкнулся со всем контейнером на полдюйма. (Примечание: удаление или добавление больше <br> тегов не помогает, равно как и установка поля на 0.)Почему тег html div с тегом p внутри него находится по-другому, чем один с тегом img внутри него?

Мой вопрос: почему это происходит и как я могу остановить его?

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

Вот код:

div { 
 
    display: inline-block; 
 
    margin-left: 5px; 
 
    border-radius: 100%; 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid black; 
 
} 
 
.friend { 
 
    border: 2px dashed #008000; 
 
} 
 
.family { 
 
    border: 2px dashed #0000ff; 
 
} 
 
.enemy { 
 
    border: 2px dashed #ff0000; 
 
} 
 
#best_friend { 
 
    border: 4px solid #00c957; 
 
} 
 
#archnemesis { 
 
    border: 4px solid #cc0000; 
 
} 
 
img { 
 
    border-radius: 100%; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
div p { 
 
    text-align: center; 
 
    border: 0; 
 
    padding: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
 
    <title>My Social Network</title> 
 
</head> 
 

 
<body> 
 
    <div class="friend" id="best_friend"> 
 
    <img src="http://www.smashbros.com/images/og/link.jpg" /> 
 
    </div> 
 
    <div class="friend"> 
 
    <img src="http://upload.wikimedia.org/wikipedia/commons/9/9e/Navi_oOot.png" /> 
 
    </div> 
 
    <div class="family"> 
 
    <img src="http://fc07.deviantart.net/fs70/i/2011/196/c/a/deku_tree_manip_by_thegeminisage-d3u262q.jpg" /> 
 
    </div> 
 
    <div class="family"> 
 
    <br> 
 
    <p>Forest elf guy number 7</p> 
 
    </div> 
 
    <div class="enemy" id="archnemesis"> 
 
    <img src="#" /> 
 
    </div> 
 
    <div class="enemy"> 
 
    <img src="#" /> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-01-30 LandGod

Чтобы исправить это, вы бы изменить vertical-align свойство на значение, отличное от значения по умолчанию, который baseline.

В этом случае следующее будет работать:

Example Here

div { 
    display: inline-block; 
    vertical-align: top; 
    /* other styling.. */ 
}

Что касается причины почему элемент сидит ниже, чем другие, это потому, что текст был выровнен с базовый уровень родственных элементов. Обратите внимание, что если вы remove the text, проблема больше не возникает. Поскольку элемент равен inline-block, изменение свойства vertical-align повлияет на него. С другой стороны, если элемент был перемещен, вы бы тоже не увидели проблему.

источник

2015-01-30 01:15:13

Спасибо вам Джоша ! Это полностью устранило мою проблему и помогло мне понять причины этого! Ты жжешь. – LandGod

потому что что-то вызывает срочную таблицу стилей, что дает для оригинальных тегов, таких как <p> or <a> or <html> or <h1> ect ..... и <p> всегда дает текстовое пространство.

поэтому лучшим решением для вас, чтобы вставить стиль для <p> , если у вас возникли проблемы с позиции, вы можете использовать padding , margin, плюс вы изменить размер, как вы хотите, это новый стиль

источник

2015-01-30 01:18:25

Почему тег html div с тегом p внутри него находится по-другому, чем один с тегом img внутри него?

ответ

Смежные вопросы