Html <div> оставляет неожиданные поля
Я новичок в HTML и CSS. Я экспериментировал с отображением <div> -s рядом. Я заметил, что простое добавление div внутри тела будет отображаться с неожиданными полями.
Я пробовал возиться со свойствами полей, границ и отступов в моем файле CSS, но, похоже, ничего не работает. div оставляет пробелы со всех сторон страницы, пожалуйста, помогите, я не знаю, как от этого избавиться.
HTML:
* {
box-sizing: border-box;
}
.box {
float: left;
width: 50%;
}
#box1 {
background-color: grey;
}
#box2 {
background-color: lightblue;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "clearfix">
<div id = "box1" class = "box">
<p>Some text in box 1.</p>
</div>
<div id = "box2" class = "box">
<p>Some text in box 1.</p>
</div>
</div>
</body>
</html>
Ответы 3
* {
box-sizing: border-box;
margin:0;
padding: 0;
}
.box {
float: left;
width: 50%;
}
#box1 {
background-color: grey;
}
#box2 {
background-color: lightblue;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "clearfix">
<div id = "box1" class = "box">
<p>Some text in box 1.</p>
</div>
<div id = "box2" class = "box">
<p>Some text in box 1.</p>
</div>
</div>
</body>
</html>Вы можете очистить поля и отступы, добавив стили к тегам html и body:
html, body {
margin: 0;
padding: 0;
}
Еще одним распространенным решением является использование сброса CSS.
Я обновил ваш фрагмент кода:
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.box {
float: left;
width: 50%;
}
#box1 {
background-color: grey;
}
#box2 {
background-color: lightblue;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "clearfix">
<div id = "box1" class = "box">
<p>Some text in box 1.</p>
</div>
<div id = "box2" class = "box">
<p>Some text in box 1.</p>
</div>
</div>
</body>
</html>Спасибо! Значит, тело по умолчанию имеет некоторый запас и отступы? Я обязательно прочитаю и статью по ссылке.
Да, все виды элементов будут иметь стили по умолчанию... поэтому обычно используется сброс CSS.
Понятно! Спасибо.
Другой вариант — установить флажок position на absolute (как в этом ответе)
* {
box-sizing: border-box;
}
.box {
float: left;
width: 50%;
}
#box1 {
background-color: grey;
position: absolute;
left: 0px;
top: 0px;
}
#box2 {
background-color: lightblue;
position: absolute;
left: 50%;
top: 0px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "clearfix">
<div id = "box1" class = "box">
<p>Some text in box 1.</p>
</div>
<div id = "box2" class = "box">
<p>Some text in box 1.</p>
</div>
</div>
</body>
</html>Просто любопытно, почему position: absolute, который может вызвать некоторые проблемы с адаптивным дизайном, вместо * { margin: 0, padding: 0; }
Я думаю, что использование * { margin: 0, padding: 0; } — лучший способ сделать это, но это просто то, что работает в конкретной ситуации, которую описывает ФП. Я удивлен, что это принятый ответ, но сам проголосую за остальных!
Как отмечали другие, все, что вам нужно сделать, это назначить поле тегу body. Вначале вам следует познакомиться с инструментами разработчика. Здесь есть множество удобных инструментов, одним из которых является вкладка «Элементы». Поскольку это будет не первый раз, когда вы задаетесь вопросом, почему элемент ведет себя определенным образом, вам следует ознакомиться с ним. Возьмите исходное сообщение, откройте «Инструменты разработчика», выберите вкладку «Элементы» и наведите курсор на свое изображение. Тут же вы увидите дефектное поле, которое было применено к вашей странице.