как реализовать изображение css (отмечено ) [требует правки]

228

21 июня 2017, 00:32

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

Answer 1

#wrapper{ 
  padding: 10px; 
  background: blue; 
  box-sizing: border-box; 
} 
.content{ 
  background: white; 
}

 <div id="wrapper"> 
      <div class="content"> 
          Тут ваш блок 
       </div> 
  </div>

Добавляйте

   box-sizing:border-box;

если родителю задаете ширину иначе может вылезти за границы экрана.

Подробнее про свойство box-sizing можно почитать тут: http://htmlbook.ru/css/box-sizing

Answer 2

Дать элементу класс. И данному классу стиль

<div class='some-class'></div>

Стиль

.some-class{
        border:4px soli #ccced0
}

Это если именно такие серые рамки.

А если просто отступ по кругу без рамок то:

.some-class{
            margin: 5px;
    }

border- рамка;

margin- внешний отступ;

padding - внутренний отступ(в данном случае вам ненужен. просто информация)

Answer 3

Тут несколько вариантов один уже указали, путем указания значения border. Другой вариант это margin если задний фон имеет цвет.

  *{ 
    padding: 0; 
    margin: 0; 
  } 
  body{ 
    background-color: #3d3d3d; 
  } 
  p{ 
    background-color: #fff; 
    min-height: 100px; 
    margin: 5px; 
  }

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>img</title> 
</head> 
<body> 
  <p></p> 
  <p></p> 
</body> 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не работает dom xml

Пользуясь документацией: Google maps API Не работает код для получения xml документа из базы данных, при запуске веб страницы появляется ошибка"This...

213

Java