Здравствуйте! Как менять положение по вертикали/горизонтали у div со значением display: inline block? margin
не работает. Спасибо.
Ссылка на сайт для визуального примера: shveypokrov.ru
body,
html {
background-color: #B63D32;
margin: 0 auto;
padding: 0;
}
div {
box-sizing: border-box;
}
#page-wrapper {
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 96.1%;
min-height: 202px;
/*border*/
border-top: 22px solid #000;
border-bottom: 13px solid #000;
border-left: 22px solid #000;
border-right: 22px solid #000;
margin: 0 auto;
/*border ends*/
}
.container {
max-width: 898px;
margin: 0 auto;
}
.logo {
width: 85px;
height: 86px;
margin: 0 auto;
padding-top: 2px;
padding-right: 9.85%;
}
.title__first {
margin-top: 6px;
font-size: 36px;
font-family: Impact, sans-serif;
color: #fff;
text-shadow: 0px 4px rgba(0, 0, 0, .34);
text-align: center;
}
h1 {
font-size: 17px;
font-family: Lobster, sans-serif;
letter-spacing: 1px;
font-weight: normal;
color: #fff;
text-align: center;
margin-top: 3px;
padding-right: 0px;
}
.title__second {
font-size: 18px;
color: #000000;
font-family: Impact, sans-serif;
text-shadow: 1px 0.5px 3px rgba(255, 255, 255, 0.6);
letter-spacing: -0.55px;
text-align: center;
margin-top: 2px;
margin-left: 0px;
padding-right: 0px;
}
.main__menu {
height: 13px;
float: none;
margin-top: 1.5%;
}
.main__menu ul li>a:hover {
color: black;
transition: 0.2s;
}
.menu {
padding: 0;
margin: 0;
display: block;
position: relative;
left: -11.1%;
}
ul {
padding-top: 11px;
}
.menu li {
float: left;
display: block;
margin: 0 auto;
width: 10%;
text-align: center;
padding-left: 23%;
}
.menu li a {
color: white;
text-decoration: none;
font-size: 19px;
font-family: Courier, sans-serif;
font-weight: bolder;
}
section {
width: 96.1%;
height: 640px;
/*border*/
border-bottom: 13px solid #000;
border-left: 22px solid #000;
border-right: 22px solid #000;
margin: 0 auto;
margin-top: -16px;
/*border ends*/
}
.container1 {
height: 100%;
margin-left: 0px;
margin-top: 16px;
margin-right: 0px;
background-color: #BFBFBF;
background-image: url(../img/fon.png);
-webkit-background-size: cover;
/* Для хрома */
-moz-background-size: cover;
/* Для лисы*/
-o-background-size: cover;
/* Для оперы*/
-ms-background-size: cover;
/* Для ИЭ*/
background-size: cover;
/* Для закрипления*/
background-position: 19%;
background-repeat: no-repeat;
}
.spisok {
height: 100%;
width: 235px;
display: inline-block;
background-color: #7B2019;
/*border*/
border-bottom: 0px solid #000;
border-left: 0px solid #000;
border-right: 15px solid #000;
/*border ends*/
}
.spisok li {
width: 195px;
height: 45px;
display: block;
margin-right: 10px;
margin-left: 13.2px;
background-image: url(../img/span_menu.png);
background-size: cover;
transition: All 0.3s ease-in-out;
}
#oblacheniya {
margin-top: 16px;
}
.spisok li a {
width: 100%;
height: 100%;
text-decoration: none;
font-family: CyrillicOldBold, sans-serif;
letter-spacing: 0.5px;
color: white;
text-decoration: none;
font-size: 16px;
font-weight: normal;
position: relative;
display: list-item;
text-align: -webkit-match-parent;
text-align: center;
padding-left: 9px;
}
.spisok ul>li:hover {
background-image: url(../img/span_menu_hover.png);
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: All 0.3s ease-in-out;
-moz-transition: All 0.3s ease-in-out;
-o-transition: All 0.3s ease-in-out;
-ms-transition: All 0.3s ease-in-out;
transition: All 0.3s ease-in-out;
}
.spisok ul li>a:hover {
text-shadow: gold 0 0 40px;
/* Свечение голубого цвета */
color: white;
}
.spisok ul li a p {
padding-top: 14px;
margin-top: 5px;
}
#ugol {
background-image: url(../img/span_menu_black.png);
}
.text-div {
width: 158px;
height: 30px;
text-align: center;
margin-left: -9px;
}
.letter-spacing {
letter-spacing: 1px;
}
.ryasi {
letter-spacing: 2px;
}
/*Конец левого меню*/
.Nashi_Tseny {
height: 62%;
width: 75%;
display: inline-block;
border: 3px solid red;
}
.text_1 {
width: 100%;
height: 100%;
font-size: 16px;
line-height: 25px;
font-family: Courier, sans-serif;
font-style: normal;
}
h2 {
font-size: 35px;
font-family: Impact;
font-weight: 400;
margin: 0 auto;
padding-top: 5px;
text-decoration: underline;
text-align: center;
}
strong {
font-weight: bolder;
font-size: 16px;
}
.vosem_tis {
font-style: italic;
font-weight: 900;
font-family: Lobster, sans-serif;
font-size: 15px;
}
footer {
width: 96.1%;
height: 150px;
/*border*/
border-bottom: 15px solid #000;
border-left: 22px solid #000;
border-right: 22px solid #000;
margin: 0 auto;
/*border ends*/
}
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/header.php';
?>
<section>
<div class="container1">
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/left_menu.php';
?>
<div class="Nashi_Tseny">
<div>
<h2>Наши цены:</h2>
</div>
<div class="text_1">
<p>Облачения:<p>
<p>-иерейские <strong>шелковые</strong> от <strong><span class="vosem_tis">9000</span></strong> рублей с шикарными галунами</p>
<p>-иерейские <strong>парчевые</strong> от <strong><span class="vosem_tis">10000</span></strong> рублей<strong>*</strong></p>
<p>Подрясники:</p>
<p>Подризники:</p>
<p>Рясы:</p>
<p>Стихари:</p>
<p>Скуфии:от 800 рублей;</p>
<p>Камилавки:от 1700</p>
<p>Крещальные:</p>
<p>Облачения для храма:</p>
<p>Вышитые кресты:</p>
<p>Кадильный уголь:</p>
*парчевые облачения с индийскими галунами шьются по заказу
</div>
</div>
</div>
</section>
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/objects/footer.php';
?>
position: relative
родителю и ребенку. Потом у ребенка меняетеtop
илиbottom
spisok
иNashi_Tseny
свойствоdisplay: inline-block;
и добавьтеfloat: left;
. И можете ровнять все margin-ами.