​🧾 Свойство margin — CSS

Свойство margin — используется для создания очищение пространства вокруг элемента.
Свойство margin устанавливает размер поля (вокруг элемента).

В CSS с помощью свойства margin вы имеете полный контроль над полями. В CSS есть свойства для установки полей с каждой стороны элемента по часовой стрелке: top сверху, right справа, bottom сверху и left слева.

margin — Сокращенное свойство для установки свойств полей в одной декларации
margin-bottom — Устанавливает нижние поле элемента
margin-left — Устанавливает левое поле элемента
margin-right — Устанавливает правое поле элемента
margin-top — Устанавливает верхнее поле элемента

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Поля - сокращенное свойство

Чтобы сократить код, можно указать все свойства полей в одном свойстве.

Свойство margin сокращенное свойство для следующих индивидуальных свойств полей:

margin-top — Поле сверху
margin-right — Поле справа
margin-bottom — Поле снизу
margin-left — Поле слева

Пример:

 {
   margin: 100px 150px 100px 80px;
} 

Вот как это работает:

Если, свойство margin имеет четыре значения.

margin: 25px 50px 75px 100px;
Поле сверху 25px
Поле справа 50px
Поле снизу 75px
Поле слева 100px

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Значение авто — CSS margin

Вы можете установить для свойства margin значение auto элемент будет находится в центре внутри контейнера по горизонтали.

Элемент примет положение указанной ширины, а остальное поле будет разделена поровну, между левым и правым полями.

Пример:

div {
width: 300px;
margin: auto;
border: 1px solid red;
}

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Значение наследовать — CSS margin

Пример ниже позволяет полю слева, быть унаследованным от родительского элемента:

Ссылка на код

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Поля — разрушить — CSS margin

Верхнее и нижнее поле элемента, иногда бывают разрушены в единое поле, равной по величине из двух полей.

Что не произойдет с левым и правым полями! Только с верхним и нижним полями!

Посмотрите следующий пример:

Ссылка на код

В примере выше, элемент <h2> имеет поле снизу 50px. Элемент <h3> имеет поле сверху 20px.

Здравый смысл предполагает, что вертикальное поле между элементами <h2> и <h3> может быть в общей сложности 70px (50px + 20px). Но в связи с разрушением поля по факту, поле будет в размере 50px

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Отступы внутри — CSS

CSS overflow

CSS свойство padding — используются для создания пространства вокруг содержимое элемента внутри определенных границ.

С помощью CSS у вас есть полный контроль над отступами. Есть свойства для установки отступа для каждой стороны элемента по часовой стрелке: top сверху, right справа, bottom сверху и left слева.

padding — Сокращенное свойство для установки всех свойств отступа в одном объявлении
padding-bottom — Устанавливает нижний отступ элемента
padding-left — Устанавливает левый отступ элемента
padding-right — Устанавливает правый отступ элемента
padding-top — Устанавливает верхний отступ элемента

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Отступы в CSS — все стороны

CSS имеет свойства для указания заполнения для каждой стороны элемента:

padding-top — отступ сверху
padding-right — отступ справа
padding-bottom — отступ снизу
padding-left — отступ слева

Все свойства padding могут иметь следующие значения:

размер - задает отступ в px, pt, cm, и т.д.
% - устанавливает отступы в процентах от ширины содержащего элемента
inherit - задает, что отступ должен быть унаследован от родительского элемента

Внимание: Отрицательные значения не допускаются.

В следующем примере задаются различные отступы для всех четырех сторон элемента <div>:

Ссылка на код

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Отступы в CSS - сокращенное свойство

Чтобы сократить код, можно указать все свойства отступов в одном свойстве.

Свойство padding является сокращенным свойством для следующих свойств отступа:

padding-top
padding-right
padding-bottom
padding-left

Итак, вот как это работает.

Если свойство padding имеет четыре значения:

padding: 25px 50px 75px 100px;
Отступ сверху 25px
Отступ справа 50px
Отступ снизу 75px
Отступ слева 100px

Пример:

div {
padding: 25px 50px 75px 100px;
}

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Отступ и ширина — CSS margin

CSS свойство width — определяет ширину области содержимого элемента. Область содержимого, это часть находится внутри элементов padding, border и margin (Бокс Модель).

Таким образом, если элемент имеет заданную ширину, отступ будет добавляться к общей ширине элемента. Это нежелательный результат.

В следующем примере элементу <div> присваивается ширина 300px. Однако фактическая отображаемая ширина элемента <div> будет равна 350px (300px + 25px левого отступа + 25px правой отступа):

div {
width: 300px;
padding: 25px;
}

Для того чтобы ширина была 300 пикселей, независимо от количества отступов, вы можете использовать свойство box-sizing. Этот элемент заставляет сохранять свою ширину; если вы увеличиваете отступ, доступное пространство содержимого будет уменьшаться. Вот пример:

div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}

height — Устанавливает высоту элемента
max-height — Устанавливает максимальную высоту элемента
max-width — Устанавливает максимальную ширину элемента
min-height — Устанавливает минимальную высоту элемента
min-width — Устанавливает минимальную ширину элемента
width — Устанавливает ширину элемента

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev

​🧾 CSS - height и width

Установка высоты и ширины

Свойства height и width используются, чтобы установить высоту и ширину элемента.

Свойства height и width могут быть установлены автоматически auto по умолчанию. Означает, что браузер вычисляет высоту и ширину, значение размера указано в px, cm и т.п., или в процентах (%) содержащего блока.

Пример:

 {
   height: 200px;
   width: 50%;
   background-color: powderblue;
}

Примечание: Свойства height и width не содержат отступы, границы и поля; они устанавливают высоту и ширину площадки внутри отступов, границ и полей для элемента!

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev

​🧾 Установка максимальной ширины — CSS

Свойство max-width используется, чтобы установить максимальную ширину элемента.

Свойство max-width может быть указано значение размера в px, cm, т.п., или в процентах (%) из содержащего их блока, или значение none по умолчанию - значит, что нет максимальной ширины.

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

Вместо этого используйте свойство max-width, в данной ситуации улучшает управляемость браузера маленьких окон.

Совет: Изменить окно браузера меньше, чем 500 пикселей в ширину, чтобы увидеть разницу между двумя контейнерами!
Этот элемент имеет высоту 100 пикселей и максимальной шириной 500 пикселей.

Примечание: Значение max-width переопределяет свойство width.

В следующем примере показан элемент <div> высота 100 пикселей и максимальная ширина 500 пикселей:

div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev

​🧾 Синтаксис изображения — HTML

HTML тег <img> — используется для встраивания изображения в веб страницу.

Изображения технически не вставляются на веб-страницу; изображения связаны с веб страницами. Тег <img> создает удерживающее пространство для ссылочного изображения.

Тег <img> пуст, он содержит только атрибуты и не имеет закрывающего тега.

Тег <img> имеет два обязательных атрибута:

src — Указывает путь к изображению
alt — Задает альтернативный текст для изображения

Синтаксис:

<img src="url" alt="альтернативный текст">

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾 Атрибут src — HTML

Атрибут src — обязательный, указывает путь (URL) к изображению.

Примечание: Когда загружается веб страница, именно браузер в этот момент получает изображение с веб сервера и вставляет его на страницу. Поэтому убедитесь, что изображение действительно остается на том же месте по отношению к веб странице, иначе ваши посетители получат значок сломанной ссылки. Значок неработающей ссылки отображается, если браузер не может найти изображение.

Пример:

<img src="img_chania.jpg" alt="Цветы в Ханье">

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾 Атрибут alt — HTML

Атрибут alt — содержит альтернативный текст для изображения, если изображение по какой-то причине не отображается (из-за медленного соединения или ошибки в атрибуте src, тогда изображение используется для чтения с экрана).

Пример:

Значение атрибута alt, должно описывать изображение

 src="img_chania.jpg" alt="Цветы в Ханье">

Если браузер не может найти изображение, он будет отображать значение атрибута alt:

 src="wrongname.gif" alt="Цветы в Ханье">

Примечание: Атрибут alt является обязательным. Веб-страница не будет проверяться правильно без него.

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾 Размер изображения - ширина и высота — HTML

Вы можете использовать атрибут style, чтобы задать ширину и высоту изображения.

Пример:

 src="img_girl.jpg" alt="Девушка в куртке" style="width:500px;height:600px;">

Кроме того, вы можете использовать атрибуты width и height.

Пример:

 src="img_girl.jpg" alt="Девушка в куртке" width="500" height="600">

Атрибуты width и height — всегда определяют ширину и высоту изображение в пикселях.

Примечание: Всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, то страница будет мигать, пока загружается изображение.

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾 Что выбрать: width и height, или style? — HTML

Все атрибуты width, height и style являются действительными в HTML5.

Однако, мы рекомендуем использовать атрибут style. Это предотвращает изменения исходного размера изображения во внутренней и внешней таблицы стилей.

Пример:

Ссылка на код

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾 Определение таблицы — HTML

Тег <table> определяет таблицу HTML.

Каждая строка таблицы определяется с помощью тега <tr>. Каждый заголовок таблицы определяется с помощью тега <th>. Каждая таблица данных/ячейка определяется с помощью тега <td>.

По умолчанию текст элементы <th> выделены жирным шрифтом и центрированы.

По умолчанию текст элементы <td> являются регулярными и выровненными по левому краю.

Простая HTML таблица:

Ссылка на код

Примечание: Элемент <td> - контейнеры данных таблицы.

Они могут содержать все виды HTML элементов: текст, изображения, списки, другие таблицы и т.д.

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾Введение — JavaScript

JavaScript может изменять содержимое HTML

Одним из многих методов JavaScript HTML является getElementById().

Пример ниже "находит" элемент HTML (с id = "demo") и меняет его содержимое (innerHTML) на "Привет JavaScript":

Пример:

 = "Привет JavaScript";

JavaScript принимает как двойные, так и одинарные кавычки

Пример:

document.getElementById('demo').innerHTML = 'Привет JavaScript';

📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾JavaScript - Где установить?

Тег <script>

В HTML, JavaScript код вставляется между <script> и </script> теги.

Пример:

document.getElementById("demo").innerHTML = "Мой Первый JavaScript";
</script>

В старых примерах JavaScript может использоваться атрибут типа: <script type="text/javascript">.
Атрибут типа не требуется. JavaScript - это язык сценариев по умолчанию в HTML.

📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾Функции и события — JavaScript

JavaScript function — это блок кода JavaScript, который может быть выполнен по запросу.

Например, функция может быть вызвана при возникновении события, например, когда пользователь нажимает кнопку.

📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev