Блог

Главная - Вопросы по программированию - поля / отступы применены неправильно

поля / отступы применены неправильно

#html #css

#HTML #css

Вопрос:

Вот мой код HTML и CSS. Вот изображение проблемы, с которой я столкнулся: скриншот.

Я не знаю, почему верхний отступ равен 10 пикселей — он должен быть 20 пикселей.

Я пытался настроить поля и отступы для различных элементов, но, похоже, ни один из них не решает проблему. Кто-нибудь знает, что является причиной этого и как это можно исправить?

 @import 'https://fonts.googleapis.com/css?family=Roboto:300,900'; /* font-family: 'Roboto', sans-serif; */

html, body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background: #ffffff; }

img { width: 100%; display: block; }

.block { color: #fff; font-size: 18px; background: #444444; text-align: center; padding: 10px 0px; } /* padding inside col */

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.wrap { width: 75%; margin: 0 auto; background: transparent; padding: 10px;} /* padding surrounding grid */

.grid { width: 100%; }

.grid:after { clear: both; content: ""; display: table; }

.row { padding: 0px 0; background: transparent; }

.col-1-4 { width: 25%; }
.col-1-2 { width: 50%; }
.col-3-4 { width: 75%; }
.col-1-1 { width: 100%; }

.col-1-5 { width: 20%; }

[class*='col'] { float: left; padding: 10px; } /* padding between cols amp; rows */

.gallery-grid { margin: 0; padding: 0; list-style: none; position: relative; width: 100%; }
.gallery-grid li { position: relative; float: left; overflow: hidden; width: 16.6666667%; width: -webkit-calc(100% / 6); width: calc(100% / 6); }

@media (max-width: 768px) { [class*='grid'] { width: 100%; } [class*='col'] { width: 100%; padding: 10px 20px;} }
@media (max-width: 768px) { .gallery-grid li { width: 33.3333333%; width: -webkit-calc(100% / 3); width: calc(100% / 3); } }  
 <!DOCTYPE html>

<html lang="en-US">
 
<head>

    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles/siimple.css">
	
</head>

<body>

	<div class="row">
		<div class="wrap">
			<div class="grid">
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-2"><div class="block">1-2</div></div>
				<div class="col-1-2"><div class="block">1-2</div></div>
			</div>
		</div>
	</div>
	<div class="row">
		<ul class="gallery-grid">
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
		</ul>
	</div>
	<div class="row">
		<div class="wrap">
			<div class="grid">
				<div class="col-1-1"><div class="block">1-1</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
			</div>
		</div>
	</div>
	
</body>

</html>

Комментарии:

1. И почему это должно быть 20 пикселей? Где для этого есть правило?

2. Не могли бы вы, пожалуйста, исправить проблему и поместить jsfiddle только с определенной частью кода.

Ответ №1:

вам просто нужно обновить это 

 .col-1-1 { width: 100%; padding-top: 20px !important; }

в вашем коде есть отступ в 10 пикселей вокруг столбцов, поэтому между 2 столбцами в общей сложности есть отступ в 20 пикселей.

или установите правило для .col-1-1 под вашим правилом col * . тогда это без!важно.

Ответ №2:

попробуйте добавить очистить: оба стиля после каждой строки

 @import 'https://fonts.googleapis.com/css?family=Roboto:300,900'; /* font-family: 'Roboto', sans-serif; */

html, body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background: #ffffff; }

img { width: 100%; display: block; }

.block { color: #fff; font-size: 18px; background: #444444; text-align: center; padding: 10px 0px; } /* padding inside col */

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.wrap { width: 75%; margin: 0 auto; background: transparent; padding: 10px;} /* padding surrounding grid */

.grid { width: 100%; }

.grid:after { clear: both; content: ""; display: table; }

.row { padding: 0px 0; background: transparent; }

.col-1-4 { width: 25%; }
.col-1-2 { width: 50%; }
.col-3-4 { width: 75%; }
.col-1-1 { width: 100%; }

.col-1-5 { width: 20%; }

[class*='col'] { float: left; padding: 10px; } /* padding between cols amp; rows */

.gallery-grid { margin: 0; padding: 0; list-style: none; position: relative; width: 100%; }
.gallery-grid li { position: relative; float: left; overflow: hidden; width: 16.6666667%; width: -webkit-calc(100% / 6); width: calc(100% / 6); }

@media (max-width: 768px) { [class*='grid'] { width: 100%; } [class*='col'] { width: 100%; padding: 10px 20px;} }
@media (max-width: 768px) { .gallery-grid li { width: 33.3333333%; width: -webkit-calc(100% / 3); width: calc(100% / 3); } }  
 <!DOCTYPE html>

<html lang="en-US">
 
<head>

    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles/siimple.css">
	
</head>

<body>

	<div class="row">
		<div class="wrap">
			<div class="grid">
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-4"><div class="block">1-4</div></div>
				<div class="col-1-2"><div class="block">1-2</div></div>
				<div class="col-1-2"><div class="block">1-2</div></div>
			</div>
		</div>
	</div>
	<div class="row">
		<ul class="gallery-grid">
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
			<li><a href="#"><img src="http://placehold.it/800x800"></a></li>
		</ul>
	</div>
  <div style="clear:both;"></div>
	<div class="row">
		<div class="wrap">
			<div class="grid">
				<div class="col-1-1"><div class="block">1-1</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
				<div class="col-1-5"><div class="block">1-5</div></div>
			</div>
		</div>
	</div>
	
</body>

</html>

Ответ №3:

В вашем CSS, во второй последней строке, медиа-запрос говорит, что отступ должен быть:

 padding: 10px 20px;

Прочитайте: «Отступ сверху вниз = 10 пикселей, а слева направо = 20 пикселей»

Замените это на следующее, если вы хотите, чтобы вверху было 20 пикселей.

 padding: 20px 10px 20px 20px;

Вы также должны обновить код на 7-й последней строке:

 [class*='col'] { float: left; padding: 10px; }

/* It should be the following - modify at will */
[class*='col'] { float: left; padding: 20px 10px 10px 10px; }

Предложение для развития вашей карьеры в CSS

В будущем, если что-то подобное повторится, devtools для вашего браузера могут стать находкой при отладке проблем CSS. В Chrome (и Firefox, и, я думаю, IE) вы можете щелкнуть правой кнопкой мыши и выбрать «проверить». Если вы хотите узнать больше, посмотрите учебник о том, как использовать devtools вашего браузера.

Ответ №4:

Это потому, что в вашем css элемент gallery-grid больше, чем элемент, содержащий его, то есть «строка». Таким образом, он выходит за пределы контейнера.

Чтобы исправить это, есть хак clearfix :-

Просто добавьте .clearfix класс ко всем строкам и определите его как:

 .clearfix {
  overflow: auto;
}

Это устранит проблему.