Содержание

width | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+3.1+1.0+1.0+1.0+

Краткая информация

Версии CSS

Описание

Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <img>). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Браузеры неодинаково работают с шириной, результат отображения зависит от используемого <!DOCTYPE>. В табл. 1 приведены возможные варианты <!DOCTYPE> и получаемая ширина.

Табл. 1. Действие width в браузерах
<!DOCTYPE>Internet ExplorerOpera 10+, Firefox, Chrome, SafariOpera 9
Не указан (режим совместимости)Если содержимое превышает заданную ширину, то блок изменяет свои размеры, подстраиваясь под содержимое. В противном случае ширина блока равна значению width.Во всех случаях браузер действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border.

Содержимое блока, если не помещается в заданные размеры, отображается поверх блока.

Ширина равна значению width.

Содержимое блока, если не помещается в заданные размеры, отображается поверх.

Переходный HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
Строгий HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»>
Ширина формируется путем сложения значений width, padding, margin и border.

Содержимое блока, если не помещается в заданные размеры, отображается поверх.

Ширина равна значению width плюс padding, margin, и border.

Содержимое блока, если не помещается в заданные размеры, отображается поверх.

HTML 5
<!DOCTYPE html>
XHTML
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»>

Синтаксис

width: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера.

auto
Устанавливает ширину исходя из типа и содержимого элемента.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>width</title>
  <style>
   .layer1 {
    width: 300px; /* Ширина блока */
    background: #fc0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    border: 1px solid #ccc; /* Параметры рамки */
   }
   .layer2 {
    width: 400px; /* Ширина текстового блока */
   }
  </style>
 </head>
 <body>
  <div>
   <p>Lorem ipsum dolor sit amet,consectetuer 
   adipiscing elit,seddiem nonummy nibh euismod tincidunt ut 
   lacreet dolore magna aliguam erat volutpat.</p>
  </div>
 </body>
</html>

Результат данного примера, как он отображается в браузере Safari показан на рис. 1.

Рис. 1. Ширина блока

Объектная модель

[window.]document.getElementById(«elementID»).style.width

Браузеры

Браузер Internet Explorer 6 некорректно определяет width как min-width. В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет ширину элемента, не добавляя к ней значение отступов, полей и границ.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Атрибут width | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+1.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.

Синтаксис

HTML
<img>
XHTML
<img />

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Исходная ширина изображения.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IMG, атрибут width</title>
 </head>
 <body>

  <p><img src="images/sample.gif"
    alt=""></p>

 </body>
</html>

размеры элемента — учебник CSS

Для того чтобы объекту можно было задать определенную ширину и высоту, в CSS существуют два свойства — width и height (соответственно). С их помощью вы можете устанавливать фиксированные размеры элементов, будь-то сайдбар, изображение, таблица или любой блок.

Особенности вычисления ширины и высоты

Для определения ширины либо высоты объекта можно использовать любые единицы измерения длины в CSS. Наиболее просты в понимании пикселы. Если вы используете процентную запись, имейте в виду, что в этом случае ширина объекта будет зависеть от ширины его родителя. Если такового нет, то ширина элемента вычисляется, исходя из ширины окна браузера (при изменении пользователем ширины окна значение width будет пересчитано).

В качестве значения ширины можно использовать и единицу

em, которая является примерно тем же, чем и размер шрифта текста, но только в условных единицах. К примеру, вы установили размер для шрифта 24px. Тогда 1em для этого элемента будет равен 24 пикселам, а если вы зададите width: 2em, то ширина составит 2×24px = 48 пикселов. Если размер шрифта не задан, он будет унаследован.

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

Процентная ширина и высота дочернего элемента вычисляются на основании размеров родителя

Что входит в ширину и высоту

Сразу стоит запомнить, что у свойств width и height

есть особенность — они не включают в себя значения margin, padding и border. Значение, которое вы установите для width/height, будет означать лишь ширину/высоту области содержимого элемента.

Таким образом, для того чтобы вычислить, например, фактическую ширину элемента (место, которое он в действительности займет на экране), понадобится немного арифметики. Фактическая ширина — это сумма значений, таких как width, padding, border и margin. Напомним, что ранее мы рассматривали, как выглядит блочная модель CSS.

Для закрепления знаний покажем пример. Допустим, у вас есть элемент с таким стилем:


width: 200px;
margin-left: 15px;
margin-right: 15px;
padding-left: 10px;
border-left: 3px solid #333;

Для подсчета фактической ширины элемента выполним сложение:

width + margin-left + margin-right + padding-left + border-left = 200px + 15px + 15px + 10px + 3px = 243px (фактическая ширина)

Рекомендации по высоте

Свойство height может быть удобным, если надо точно контролировать, например, высоту изображения. Однако, если в контейнере будет содержаться текст или любой другой контент, у которого может варьироваться высота, крайне не рекомендуется устанавливать фиксированную высоту для контейнера, так как подобная верстка может привести к неожиданному результату — контент будет отображаться поверх другого содержимого.

Вместо фиксированной высоты использовать height: auto — эта запись означает, что высота объекта будет рассчитываться автоматически, в зависимости от содержимого, которое он содержит.

Другой способ избежать развала верстки — использовать запись overflow: auto

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


 

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

width — CSS | MDN

Свойство CSS width устанавливает ширину элемента. По умолчанию она равняется ширине внутренней области, но если box-sizing имеет значение border-box, то она будет равняться ширине области рамки.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.

Свойства min-width и

max-width перекрывают width.


width: 300px;
width: 25em;


width: 75%;


width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;


width: inherit;
width: initial;
width: unset;

Свойство width указывается как:

Значения

<length>
Ширина — фиксированная величина.
<percentage>
Ширина в процентах — размер относительно ширины родительского блока.
border-box
Если присутствует, то предшествующие <length> или <percentage> применяются к области рамки элемента.
content-box
Если присутствует, то предшествующие <length> или <percentage> применяются к внутренней области элемента.
auto
Браузер рассчитает и выберет ширину для указанного элемента.
fill
Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.
max-content
Внутренняя максимальная предпочтительная ширина.
min-content
Внутренняя минимальная ширина.
available
Ширина содержащего блока минус горизонтальные margin, border и padding.
fit-content
Наибольшее из:
  • внутренняя минимальная ширина
  • меньшая из внутренней предпочтительной ширины и доступной ширины

Формальный синтаксис

Ширина по умолчанию

p.goldie {
  background: gold;
}
<p>Сообщество Mozilla производит множество отличного ПО.</p>

Пиксели и em

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
<div>Ширина в пикселях</div>
<div>Ширина в em</div>

Проценты

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
<div>Ширина в процентах</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           
  width: -moz-max-content;    
  width: -webkit-max-content; 
}
<p>Сообщество Mozilla производит множество отличного ПО.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    
  width: -webkit-min-content; 
}
<p>Сообщество Mozilla производит множество отличного ПО.</p>

Убедитесь, что элементы с width не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.

BCD tables only load in the browser

Свойства CSS width и height.

Свойства css width отвечает за значение ширины области с содержимым элемента.

width: значение | проценты | auto | inherit

Свойства css height отвечает за значение высоты области с содержимым  элемента.

height : значение | проценты | auto | inherit

Как ширина, так и высота элементов может задаваться всеми доступными способами, которые описаны здесь, либо значением auto, либо значение inherit.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Отрицательные значения высоты и ширины указывать не допускается.

Казалось бы, что с этими свойствами CSS все просто и понятно, но, на самом деле, все оказывается не совсем так просто.

Задав какому-нибудь элементу на веб-странице ширину с помощью свойства width 500px это не будет означать, что общая ширина этого элемента будет 500 пикселей и не более.

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

Свойства width и height — это всего-лишь одни из составляющих из которых будет вычисляться общая ширина и высота элемента. Они указывают ширину и высоту области Content, которую можно видеть на следующем изображении. Также в формировании общей ширины и высоты участвуют такие свойства как padding, margin и border.

В этом можно легко сейчас убедиться.

Давайте, для примера, возьмем два блока с одинаковой шириной width, но одному из них зададим дополнительно свойство padding.

<div>
<div> width:100px </div>
<div> width:100px + padding</div>
</div>

По умолчанию, веб-страницы имеют поведение, что к значению высоты и ширины добавляется значение padding для соответствующей стороны.

Т.е. общая ширина элемента будет состоять из значения свойства width элемента и к нею будет плюсоваться значение padding-left и padding-right.

Для разных типов элементов, которые можно встретить на странице общая ширина и высота элементов считается по специальным формулам.

Для разных типов элементов, которые возможно встретить на веб-страницах значения width и height могут иметь разное поведение и значения.

Аналогичная ситуация будет со свойством height.

<div>
<div> height:100px </div>
</div>
<div>
<div> height:100px + padding </div>
</div>

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

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Ширина (width) и высота (height) в HTML

В этой статье рассмотрим, как можно задавать ширину и какими свойствами стоит делать это. Для первого примера возьмём блочный элемент div. По умолчанию он имеет высоту равную нулю (если ничего не содержит) и занимает 100% ширины родительского элемента. Попробуем задать ему ширину в 200 пикселей и высоту в 150. Для этого используем CSS свойства width (ширина) и height (высота):
<div></div>
Получится такой результат:
Можно задавать ширину не только в пикселях, но и в процентах от ширины родительского элемента. Попробуем сделать это: 
<div></div>
Получится такой результат:
К сожалению, задать высоту для блочного элемента в процентах не получится. Если написать «height:50%;», то в разных браузерах будет диаметрально противоположный результат, поэтому лучше считать такую запись ошибкой.
Только у одного элемента можно задать свойство height в процентах, а точнее у псевдоэлементов :before и ::after. Читайте о них в статье Псевдоэлементы (:before, ::after) 

Максимальная и минимальная ширина (max-width и min-width)

Жёсткое ограничение ширины — это не лучший способ строить сайт. Потому что в таком случае появятся проблемы с адаптацией под мобильные и планшеты: ширина экрана может быть меньше ширины блока. Тогда часть сайта будет выходить пределы вёрстки сайта и появится горизонтальная прокрутка, чего у версии сайта на мобильном быть не должно. Поэтому вместо жёсткого задания ширины используется ограничение сверху через CSS свойство max-width. Мы знаем, что блочный элемент div пытается занять всю ширину родительского элемента, как будто по умолчанию у него есть свойство width и оно имеет значение 100%.
<div></div>
Результат будет аналогичен предыдущему примеру:
Но теперь, если вы возьмёте окно своего браузера и сузите до 400 пикселей и меньше, то увидите как контейнер div уменьшает свои размеры, чтобы не выпрыгивать за пределы вёрстки. Если же изменить «max-width:400px;» на «width:400px», то блок будет выходить за пределы родительского элемента:
По смыслу свойство min-width является диаметрально противоположным к max-width. Оно ограничивает минимальную ширину элемента, но не ограничивает максимальную.

Максимальная и минимальная высота (max-height и min-height)

Для блока div можно задать максимальную высоту. Это делается в том случае, если контента в блоке будет слишком много и есть вероятность, что он испортит вёрстку сайта. Ведь у контейнера div высота изменяется автоматически в зависимости от того, сколько занимает места его дочерние элементы.

Рассмотрим наглядный пример необходимости использования max-height. Допустим, что нам надо сделать чат, где пользователи сайта смогут обмениваться текстовыми сообщениями. Для этого нужно создать контейнер, который будет расти по мере появления в нём новых сообщений. Но как только div достигает определённой высоты, то перестаёт расти и появится полоса прокрутки. Используем следующий CSS код:

<div  contenteditable="true">
   Тише, мыши, кот на крыше,
   а котята ещё выше.
   Кот пошёл за молоком,
   а котята кувырком.
   Кот пришёл без молока,
   а котята ха-ха-ха. 
</div>
Весь текст не вместится в div. Поэтому из-за свойства «overflow-y: scroll;» появится полоса прокрутки:

Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

Благодаря атрибуту contenteditable=»true» у тега div в примере, Вы можете изменить текст внутри контейнера. Попробуйте удалить и добавить несколько строк. Размер контейнера будет подстраиваться под количества текста в нём до тех пор, пока не станет быть равен 100px. Затем появится полоса прокрутки.

По смыслу свойство min-height является диаметрально противоположным к max-height. Оно ограничивает минимальную высоту элемента, но не ограничивает максимальную.

CSS3 | Размеры элементов. Box-sizing

Размеры элементов

Последнее обновление: 21.04.2016

Размеры элементов задаются с помощью свойств width (ширина) и height (высота).

Значение по умолчанию для этих свойств — auto, то есть браузер сам определяет ширину и высоту элемента. Можно также явно задать размеры с помощью единиц измерения (пикселей, em) или с помощью процентов:


width: 150px;
width: 75%;
height: 15em;

Пиксели определяют точные ширину и высоту. Единица измерения em зависит от высоты шрифта в элементе. Если размер шрифта элемента, к примеру, равен 16 пикселей, то 1 em для этого элемента будет равен 16 пикселям. То есть если у элемента установить ширину в 15em, то фактически она составит 15 * 16 = 230 пикселей. Если же у элемента не определен размер шрифта, то он будет взят из унаследованных параметров или значений по умолчанию.

Процентные значения для свойства width вычисляются на основании ширины элемента-контейнера. Если, к примеру, ширина элемента body на веб-странице составляет 1000 пикселей, а вложенный в него элемент <div> имеет ширину 75%, то фактическая ширина этого блока <div> составляет 1000 * 0.75 = 750 пикселей. Если пользователь изменит размер окна браузера, то ширина элемента body и соответственно ширина вложенного в него блока div тоже изменится.

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

Например:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Размеры в CSS3</title>
        <style>
		div.outer{
			width: 75%;
			height: 200px;
			margin: 10px;
			border: 1px solid #ccc;
			background-color: #eee;
		}
		div.inner{
		
			width: 80%;
			height: 80%;
			margin: auto;
			border: 1px solid red;
			background-color: blue;
		}
        </style>
    </head>
    <body>
		<div>
			<div></div>
		</div>
	</body>
</html>

В то же время фактические размеры элемента могут в итоге отличаться от тех, которые установлены в свойствах width и height. Например:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Размеры в CSS3</title>
        <style>
		div.outer{
			width: 200px;
			height: 100px;
			margin: 10px;
			padding: 10px;
			border: 5px solid #ccc;
			background-color: #eee;
		}
        </style>
    </head>
    <body>
		<div>
			Определение фактического размера в CSS 3
		</div>
	</body>
</html>

Как видно на скриншоте, в реальности значение свойства width — 200px — определяет только ширину внутреннего содержимого элемента, а под блок самого элемента будет выделяться пространство, ширина которого равна ширине внутреннего содержимого (свойство width) + внутренние отступы (свойство padding) + ширина границы (свойство border-width) + внешние отступы (свойство margin). То есть элемент будет иметь ширину в 230 пикселей, а ширина блока элемента с учетом внешних отступов составит 250 пикселей.

Подобные расчеты следует учитывать при определении размеров элементов.

С помощью дополнительного набора свойств можно установить минимальные и максимальные размеры:

  • min-width: минимальная ширина

  • max-width: максимальная ширина

  • min-height: минимальная высота

  • max-height: максимальная высота


min-width: 200px;
width:50%;
max-width: 300px;

В данном случае ширина элемента равна 50% ширины элемента-контейнера, однако при этом не может быть меньше 200 пикселей и больше 300 пикселей.

Переопределение ширины блока

Свойство box-sizing позволяет переопределить установленные размеры элементов. Оно может принимать одно из следующих значений:

  • content-box: значение свойства по умолчанию, при котором браузер для определения реальных ширины и высоты элементов добавляет к значениям свойств width и height ширину границы и внутренние отступы

  • padding-box: указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы как часть своего значения. Например, пусть у нас есть следующий стиль:

    
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #eee;
    box-sizing: padding-box;
    

    Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) — 10px (padding-left) — 10px (padding-right) = 180px.

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

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

    
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #eee;
    box-sizing: border-box;
    

    Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) — 10px (padding-left) — 10px (padding-right) — 5px (border-left-width) — 5px (border-right-width) = 170px.

Например, определим два блока, которые отличаются только значением свойства box-sizing:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Размеры в CSS3</title>
        <style>
		div{
			width: 200px;
            height: 100px;
            margin: 10px;
            padding: 10px;
            border: 5px solid #ccc;
            background-color: #eee;
		}
        div.outer1{
			box-sizing: content-box;
        }
		div.outer2{
			box-sizing: border-box;
        }
        </style>
    </head>
    <body>
        <div>
            Определение фактического размера в CSS 3
        </div>
		<div>
            Определение фактического размера в CSS 3
        </div>
    </body>
</html>

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

Длина, ширина, высота, глубина — элементарная математика

Длина, ширина, высота, глубина

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

Вопрос: Следует ли обозначить два размера прямоугольника длиной и шириной ; или ширина и высота ; или даже по длине и по высоте ? Есть ли «правильное» использование терминов длина , ширина , высота и глубина ?

Прямоугольники разной формы и положения.

Выбор словаря здесь полностью зависит от ясности и отсутствия двусмысленности. Математика не предписывает правил «правильного» использования этих терминов в данном контексте. В математике, как и везде, цель специализированной лексики — служить ясному, недвусмысленному общению. В этом случае наш естественный способ разговора дает нам некоторые рекомендации.

Длина: Если вы решите использовать слово , длина , оно должно относиться к самому длинному измерению прямоугольника.Подумайте, как бы вы описали расстояние вдоль дороги: это длинное расстояние , длинное расстояние дороги. (Слова по , по длине и по длине th связаны между собой.) Расстояние через дорогу говорит о ширине дороги от одной стороны до другой. То есть ширина дороги. (Слова wid e и wid th тоже связаны между собой.)

Когда прямоугольник нарисован на странице «наклонным», как этот, обычно лучше всего обозначить длинную сторону «длиной», а другую сторону — «шириной», как если бы вы наносили маркировку на дорогу.

Наклонный прямоугольник.

Высота: Когда прямоугольник рисуется с горизонтальной и вертикальной сторонами, слово высота дает понять, какой размер имеется в виду; высота обозначает высоту (высоту) прямоугольника. Это позволяет легко указать другое измерение — ширину прямоугольника из стороны в сторону — с помощью слова ширины . И если измерение по бокам больше высоты, можно назвать это длиной прямоугольника, так как это не создает путаницы.

Прямоугольники разной ориентации.

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

Когда слово высота используется в сочетании с основанием , оно имеет особое значение, которое не обязательно относится к вертикальному измерению.

Для некоторых непрямоугольных форм термины длина , высота или ширина останутся неясными, ясно покажут, что вы имеете в виду, и назовите их «это расстояние» или «это измерение».”

Три измерения

При обозначении размеров трехмерной фигуры единственное правило имеет смысл и должно быть ясным . Поможет использовать ярлыки.

Когда фигура «ровная», высота явно относится к вертикальному измерению — насколько высока фигура — независимо от того, наибольшее или наименьшее это измерение или что-то среднее; длина (если вы используете это слово) относится к большему из двух других измерений. Но вы также можете называть другие размеры шириной и глубиной (и они в значительной степени взаимозаменяемы, в зависимости от того, что «кажется» широким или глубоким в фигуре).См. Эти примеры.

Когда высота неясна — например, если фигура не является «ровной» — люди не могут знать, что подразумевается под шириной, глубиной или высотой без ярлыков, хотя длина обычно все еще считается фигура. И, как и в двух измерениях, такие термины, как «длина», «ширина» и «высота», не будут казаться естественными или понятными для некоторых форм, таких как теннисный мяч.

Что одним словом?

Длина , ширина , высота и глубина — существительные, образованные от прилагательных длинный , широкий , высокий и глубокий .Они следуют общепринятой английской схеме, которая включает замену гласной (часто на более короткую) и добавление -го . (Одиночный t на высоте является современным. Устаревшие формы включают высотой и высотой , и до сих пор часто можно услышать, как люди произносят его таким образом.)

w i d e d ee p h i gh л или нг br oa d
w i d th d e p th ч ei gh т l e ng th br ea d th

Другие английские пары прилагательное-существительное также связаны таким же образом: e.g., hale как «бодрый и бодрый» и health (но hale , за исключением этого выражения, теперь в основном заменяется на «здоровый»).

Определение ширины по Merriam-Webster

\ ширина , ˈWitth \ 1 : горизонтальное измерение под прямым углом к ​​длине : ширина

2 : большой размер или объем

3 : мерный отрезанный кусок материала ширина бязи

Что такое «ширина» в геометрии?

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

Оказывается, не только ее учителя. Взгляните на эту страницу, с которой я столкнулся, когда гуглил по этой теме. Там написано:

В случае квадрата или прямоугольника обычно используется длина выражения (1) вместо основания и ширина (w) вместо высоты. В случае круга используется выражение диаметр (d).

«Ширина вместо высоты» очень похожа на выражение «вверху вниз».Откуда это взялось?

И что еще больше сбивает с толку, так это то, что учителя не осознают эту двусмысленную природу «ширины». Двое других учителей сказали мне, что ширина — это всегда горизонтальная сторона, а другой сказал мне, что слышал, как другие называют вертикальную сторону «шириной». Таким образом, очевидно, каждый авторитетно преподает своим ученикам собственное определение «ширины». Если 12-летний учитель математики говорит, что «ширина» в геометрии относится к вертикальной стороне, почему она должна в этом сомневаться? Если, конечно, ей также не сказали, что «ширина» может быть вертикальной или горизонтальной (т.е. направление нейтральное, например, «длина»). Но очевидно, что это не то, что происходит в школе Нью-Йорка.

Если мы учим наших детей, что треугольник имеет три стороны, мы не хотим, чтобы они думали, что определение «треугольник» может быть гибким, как если бы у него могло быть четыре или пять сторон. Если определение «ширины» не является универсальным, им необходимо это знать. Вот показательный пример. Следующий вопрос был задан в тесте Common Core по математике для 6-го класса 2016 года.

«Плотник построил три книжных шкафа, A, B и C, чтобы они стояли рядом друг с другом вдоль стены.Общая длина стены составляет 456 сантиметров. Плотник построит еще два книжных шкафа, D и E, вдоль той же стены. Эти два книжных шкафа будут иметь одинаковую ширину . Ширина и книжных шкафов A, B и C показаны на чертеже таблицы ».

Теперь, если бы вас учили, что в геометрии «ширина» означает вертикальную сторону, а «длина» означает горизонтальную сторону, вы бы запутались, читая этот вопрос. Правильный ответ был бы: «Но почему« ширина »книжных шкафов должна иметь какое-либо отношение к« длине »стены при установке книжных шкафов?»

Моя дочь пыталась понять это, нарисовав кучу книжных полок разной высоты, но в конце концов сдалась, потому что вопрос не имел для нее смысла.

В Merriam-Webster слово «ширина» не имеет двусмысленности: « горизонтальное измерение , выполненное под прямым углом к ​​длине». В конце концов, слово «высота» не имеет двусмысленности, так почему же мы должны думать, что «ширина» — это так?

Но взгляд на Оксфордский словарь дает нам несколько иной ответ: «Измерение или протяженность чего-либо из стороны в сторону; меньшее из двух или наименьшее из трех измерений тела ».

Другими словами, в прямоугольнике «меньшая из двух» сторон будет называться «шириной» независимо от ориентации.Итак, похоже, что это вопрос противостояния Америки и Великобритании, или нет? (Обратите внимание на написание слова «диаметр» на странице с сайта fao.org, процитированной выше.)

Длина, ширина и высота | Как читать размеры | Smartick

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

Длина — это линейное измерение, то есть мы можем использовать его только для измерения расстояния между двумя точками.

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

Однако объекты, которые мы используем каждый день, не являются прямыми линиями, поэтому мы не можем измерить их одинаковым способом. Нам нужно использовать несколько разных измерений, чтобы определить их размеры.

Например, если мы хотим определить размеры листа бумаги внутри этого конверта, нам нужно измерить две вещи: длину и высоту.

Мы сняли два мерки этого конверта: длину 16 см и высоту 8 см.

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

Мы взяли три мерки из этого ящика: длина 20 см, ширина 10 см и высота 15 см.

Длина, ширина и высота — это измерения, которые позволяют нам указывать объем геометрических тел. Длина (20 см) и ширина (10 см) соответствуют горизонтальному размеру.С другой стороны, высота (15 см) относится к вертикальному размеру.

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

170 дюймов (высота) x 60 дюймов (ширина) x 45 дюймов (длина)

Я надеюсь, что эта статья помогла вам научиться измерять размеры объектов в мире вокруг вас.

Не забывайте, что вы можете бесплатно зарегистрироваться в Smartick, чтобы выполнять упражнения с использованием единиц измерения, среди многих других !

Подробнее:

Команда по созданию контента.
Многопрофильная и многонациональная команда, состоящая из математиков, учителей, профессоров и других специалистов в области образования!
Они стремятся создать максимально возможное математическое содержание.

В чем разница? — Diffzi

Когда мы измеряем стороны объекта, который имеет отличительные черты, мы всегда обращаем внимание на два наиболее важных момента в них. Их длина и ширина. Оба они не одинаковы и должны иметь в виду разные вещи, прежде чем окончательно решить, какая сторона получит какое имя.Длина определяется как измерение чего-либо от одного конца до другого. Это самое большое расстояние от одной руки до другой и самое большое в трех измерениях тела. Ширина определяется как измерение чего-то от одной руки до другой, самого маленького или самого большого.

Содержание: разница между длиной и шириной

Сравнительная таблица

Основание для различения Длина Ширина
Определение Измерение чего-либо от одного конца до другого. Измерение чего-либо от одной стороны до другой.
Природа Наибольшее расстояние от одной руки до другой и наибольшее в трех измерениях тела. Наименьшее расстояние от одной стороны до другой и наиболее значительное в трех измерениях тела.
Геометрия Самая большая сторона объекта называется длиной Наименьшее расстояние от объекта называется шириной.
Шт. Метр Метр
Пояснение Что-то, что объясняет, насколько широк объект. Что-то, что определяет, насколько расширен элемент.

Реклама — продолжить чтение ниже

Что такое длина?

Длина определяется как измерение чего-либо от одного конца до другого. Это самое большое расстояние от одной стороны до другой и самое большое в трех измерениях тела.Если мы хотим определить это простыми словами, определение распространяется на что-то или на всю длину тела. Термин произошел из немецкого языка и вошел в старую английскую письменность как lengthu, оттуда вместе со словом long он приобрел нынешнюю форму длины. Он в основном используется в качестве геометрического измерения и является самой протяженной частью объекта. Например, у нас есть компьютер, который имеет квадратную форму, и теперь сторона, где наибольшее расстояние от одной стороны до другой, называется его длиной.Другой пример — телевизоры, когда мы идем покупать их, различные размеры определяются как общий размер набора. Это расстояние не от одной стороны к другой, а наибольшее расстояние на квадрате, даже если оно теоретически разделяет объект на две половины. В единицах СИ первоначальный термин, который используется для обозначения длины, — это метр и измеряется как скорость света. В большинстве случаев люди полагали, что раньше единицами измерения были части человеческого тела.

Что такое ширина?

Ширина определяется как измерение чего-либо от одной стороны до другой. Это будет не самая большая или самая маленькая длина предмета, а длина одной стороны и комбинация другой. Даже если в некоторых случаях он становится самой большой длиной, используется термин «ширина». Однако в большинстве случаев фиксируется самая короткая длина чего-либо. Поскольку наибольшее значение имеет длина, единственная другая возможность в объекте со сторонами имеет ширину.Другой способ определения этого термина — это обычный способ измерения того, насколько далеко находится трехмерный объект. Допустим, есть телевизор, самая большая длина такого устройства находится рядом, поэтому мы говорим, что ширина телевизора — это самый большой диапазон, который у него есть, но поскольку это не всегда верно, длина большинства телевизоров измеряется от одного конца до другого в виде треугольника. Проще говоря, мы говорим, что ширина — это то, что объясняет, насколько широк объект, тогда как длина определяет длину элемента.В то время как длина имеет свою единицу, ширина считается одним и тем же термином и измеряется в тех же единицах. Другой простой способ — иметь в виду, что все по горизонтали — это ширина.

Ключевые различия между длиной и шириной

  1. Длина определяется как измерение чего-либо от одного конца до другого. Это самое большое расстояние от одной стороны до другой и самое большое в трех измерениях тела. Ширина определяется как измерение чего-либо от одной стороны до другой, от наименьшего или наибольшего.
  2. Внутри прямоугольника самая большая сторона объекта называется длиной, а самая короткая продолжительность объекта называется шириной.
  3. В трехмерной модели сторона горизонтальной поверхности называется шириной, а сторона вертикальной поверхности — длиной.
  4. Проще говоря, мы говорим, что ширина — это то, что объясняет, насколько широк объект, тогда как длина определяет длину элемента.
  5. Единицы измерения длины и ширины такие же, как и метр.
  6. Для объекта в реальной жизни самая большая сторона, которая делит инструмент на прямоугольник или треугольник, самая большая — всегда длина, тогда как стороны объекта всегда называются шириной.
  7. Человека всегда называют длиной, а объект всегда называют длиной и шириной.

Пояснение к видео

Реклама — продолжить чтение ниже

Что такое широта в математике? — Видео и стенограмма урока

Значение ширины

В математике ширина используется для описания расстояния от правой стороны до левой стороны фигуры.Вы можете подумать, что определение ширины ужасно похоже на определение ширины. Что ж, ты прав! Слова ширина и ширина — синонимы!

Взгляните на это изображение розового прямоугольника.

Этот розовый прямоугольник имеет ширину 20 дюймов.

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

Площадь

Ранее в уроке мы немного поговорили о площади, так что давайте продолжим этот разговор. Область сообщает нам, сколько места внутри фигуры. В этом уроке мы сосредоточимся на поиске площади прямоугольника.

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

Этот синий прямоугольник имеет ширину 2 дюйма.

На этом рисунке синий прямоугольник выглядит так, как будто ширина синего прямоугольника составляет 2 дюйма, поскольку от его левой стороны до правой стороны 2 дюйма.Похоже, что высота синего прямоугольника составляет 12 дюймов, поскольку от его верха до низа 12 дюймов. Чтобы найти площадь, умножаем ширину и высоту. Вот формула для определения площади:

Площадь = Ширина (ширина) x Высота (длина)

Площадь = 2 x 12

Площадь = 24 квадратных дюйма

Теперь, когда мы решили уравнение, давайте сосредоточимся на единиц измерения на мгновение. Поскольку мы умножили 2 дюйма на 12 дюймов, мы даем наш ответ в квадратных дюймах, а не только в дюймах.«Квадратная» часть говорит нам, что 24 — это площадь прямоугольника, а не только одно из его измерений, таких как ширина или ширина, высота или длина.

Резюме урока

Ширина — это ширина фигуры, описывающая расстояние от правой стороны до левой стороны фигуры. Чтобы найти область , или сколько места внутри фигуры, мы умножаем ее два измерения, например ширину или ширину и высоту или длину. Формула для определения площади фигуры:

Площадь = Ширина (ширина) x Высота (длина)

Разница между шириной и шириной

Автор: Admin

Ключевое различие — ширина и ширина

Хотя слова ширина и ширина звучат почти одинаково, между двумя словами есть разница.Если вы посмотрите словарь, вы заметите, что ширина означает расстояние от стороны к стороне объекта. Кроме того, ширина относится к измерению или протяженности чего-либо из стороны в сторону. Это ясно указывает на то, что оба слова, похоже, имеют одинаковое объяснение расстояния от стороны к стороне объекта. Это потому, что слова очень связаны друг с другом. Однако между этими двумя словами есть небольшая разница. Ключевое различие между шириной и шириной заключается в том, что слово ширина специально используется для измерения .В этом смысле он рассчитывает расстояние. С другой стороны, ширина используется и для других целей . Например, он также захватывает другие качества и особенности. В этой статье позвольте нам получить более четкое представление о них на некоторых примерах.

Что такое ширина?

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

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

Когда он начал обращаться к аудитории, широта его знаний стала очевидной.

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

Что такое ширина?

Ширина относится к измерению или протяженности чего-либо из стороны в сторону. Это просто объясняет, насколько что-то широкое. Давайте посмотрим на пример.

Она сказала мне, что он был около шести метров в ширину.

Это явно относится к определенному измерению объекта. Мы можем использовать слово «ширина» для обозначения дорог, тропинок. Например, когда мы хотим сказать, что дорога очень широкая, можно использовать ширину слова.Некоторые считают, что ширина специально используется для объектов буквально, в отличие от дыхания, которое можно использовать в переносном смысле. Например, когда мы говорим о знании, оно используется скорее в переносном, чем в буквальном смысле. Это главное различие между двумя словами. Эту разницу можно резюмировать следующим образом.

В чем разница между шириной и шириной?

Определения ширины и ширины:

Ширина: Ширина означает расстояние от стороны до стороны объекта.

Ширина: Ширина относится к измерению или протяженности чего-либо из стороны в сторону.

Значения ширины и ширины:

Измерения:

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

Ширина: Ширина специально используется для измерения.

Объект:

Ширина: Ширина захватывает как буквальные, так и образные объекты.

Ширина: Ширина в основном захватывает буквальные объекты.

Изображение предоставлено:

1. Youtube-спикер с аудиторией Кристина Сапата Перес (собственная работа) [CC BY-SA 4.0], через Wikimedia Commons

2. Финская национальная дорога 4 широкая обочина Автор Adbar (собственная работа) [CC BY-SA 3.0], через Wikimedia Commons

.