Как сместить текст в блоке в сторону немного?

Рейтинг: 1Ответов: 2Опубликовано: 06.10.2014

Дано: блок, в котором картинка и span.

При наведении, то есть hoverе, картинка затемняется и появляется блок с текстом. Все нормально. Но! Текст очень близко расположен к вверху и левой части блока. margin и padding не помогли. Так сам блок с текстом сместился.

Что использовать, чтобы текст сместить вниз чуть-чуть и вправо на 10px хотя бы?

Вот код: http://jsfiddle.net/skarui/ju9tbsgt/

css html
Источник: Stack Overflow на русском

Ответы

▲ 2

используйте padding + box-sizing: border-box;

* {
    padding: 0;
    margin: 0;
}
.catalog {
    float:left;
    margin:1px;
    width: 194px;
    height: 194px;
}
.catalog span {
    display: inline-block;
    position: relative;
    width: 194px;
    height: 194px;
}
.catalog span img {
    display: inline-block;
    position: relative;
    width: 194px;
    height: 194px;
}
.catalog span strong {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(46, 50, 53, 0.8);
    color: #fff;
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.catalog span:hover strong {
    display: block;
}
<div class="catalog"> 
    <span>
        <img src="http://moyhutor.net/wp-content/uploads/2012/08/ogurec1.jpg" alt="" />     
        <strong>какое нибудь текст здесь есть находится написано в нем что-то!</strong>
    </span>
</div>

http://jsfiddle.net/zum5jy0k/

▲ 2

.catalog {
  float:left;
  margin:1px;
}

.catalog .img {
  display: inline-block;
  position: relative;
}

.catalog .img img {
  display: block;
}

.catalog .img strong {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #555;
  background: rgba(46, 50, 53, 0.8);
  color: #fff;
  font-size: 14px;
  padding: 10px;
}

.catalog .img:hover strong {
  display: block;
}
<div class="catalog">
<span class="img"><img src="http://moyhutor.net/wp-content/uploads/2012/08/ogurec1.jpg" width="194px" height="194px">
<strong>какое нибудь текст здесь есть находится написано в нем что-то!</strong>
    </span>
</div>