параметр position: relative. Затем, задайте для элемента параметр position: absolute и соответственно значения для rect.

.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

Изменение размеров и усечение изображения

В этом примере я покажу, как изменять размер изображений и обрезать их. Мои исходные изображения имеют прямоугольную форму. Я хочу уменьшить их масштаб на 50%, чтобы создать галерею с возможностью предпросмотра, миниатюры сделать квадратными. Для этого я использовал атрибуты width и height, чтобы изменить размер изображений и обрезал их при помощи атрибута clip. Затем я использовал атрибут left, чтобы сместить изображения на 15 пикселей влево.

.gallery li {
  float: left;
  margin: 0 10px 0 0;
  position: relative;
  width: 70px;
  height: 70px;
  border: solid 1px #000;
}
.gallery img {
  width: 100px;
  height: 70px;
  position: absolute;
  clip: rect(0 85px 70px 15px);
  left: -15px;
}

2. Min-height

Атрибут min-height позволяет задавать минимальную высоту элемента. Он очень полезен, когда необходимо сбалансировать вашу разметку.

.with_minheight {
  min-height: 550px;
}

Установка Min-height для IE6

Обратите внимание: min-height не поддерживается IE6, но существует небольшая min-height уловка.

.with_minheight {
  min-height:550px;
  height:auto !important;
  height:550px;
}

3. White-space

Атрибут white-space определяет, как будут отображаться пробелы в элементе. К примеру, установка white-space: nowrap отключит автоматический переход текста на новую строку.

em {
  white-space: nowrap;
}

4. Cursor

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

.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}

.clickable:hover {
  cursor: pointer;
}

5. Display inline / block

На всякий случай, если вы не знали: все блочные элементы обрабатываются на новой строке, в то время как линейные элементы обрабатываются на одной строке. Тэги