Применение маржи на - PullRequest
       7

Применение маржи на

0 голосов
/ 26 ноября 2018

Меня спросили в одном из моих интервью, что «Есть два div, div1 и div2, если мы применим 100 полей к div1, каков будет результат и как это повлияет на оба div?» .. Я искал этот ответ наИнтернет, но не получил точного ответа ..

Ответы [ 3 ]

0 голосов
/ 26 ноября 2018

Вы можете легко попробовать это.

Создайте базовую и минимальную HTML-страницу и проверьте, что происходит.Информация в вашем вопросе немного скудна, но возьмем, к примеру,

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    #div1 {background-color: red;}
    #div2 {background-color: green;}
  </style>
</head>
<body>

  <div id="div1" style="">DIV 1</div>
  <div id="div2">DIV 2</div>

</body>
</html>

. В итоге вы получите две цветные полосы друг над другом.

Если вы сейчас измените style="" в строке 11 до style="margin: 100px;" вы увидите, что изменилось.100 Пиксель свободного пространства сверху, слева, снизу и справа от 1-го div.

Но поскольку в вашем вопросе отсутствуют детали, например, о том, как определяются оба DIV, если поле должно быть px,или em или что-то подобное, этот ответ в основном всего лишь догадка.

0 голосов
/ 26 ноября 2018

Проще говоря, если ваш div содержит какой-либо контент, то ваш div с полем перемещается, как показано ниже, в snippet.div с полем с полем 100px со всех четырех сторон, и если вы хотите назначить маржу любой конкретной стороне, вы можете использовать( поле сверху, поле снизу, поле справа или поле слева .)

<div style="margin: 100px">This div has 100px margin.</div>

<div>This is initial div</div>
0 голосов
/ 26 ноября 2018

Поскольку вы не указали единицу измерения маржи, я предполагаю px.Если мы говорим о двух div элементах без каких-либо дополнительных стилей (важно), так что их значение свойства display равно block, первый div просто получит поле 100, адругой будет визуально перемещен, поскольку первое поле 'div займет некоторое пространство, которое оттолкнет второе.Если эти элементы имеют какой-либо контент, первый контент div будет смещен на 100 (вправо) от контента другого.

#div1 {
  margin:100px;
}
<div id='div1'>This is the first div</div>
<div id='div2'>This is the second div</div>
...