Проблема в том, что margin: 110(.facture_title) почему-то делает отступ от соседнего section при этом padding работает нормально. У другого блока section при таком margin всё работает нормально! В чём может быть проблема? https://cloud.mail.ru/public/dJ9G/9GfxgUAhS - ссылка на исходники, если нужно
При margin:
При padding:
Другой section с заданием такого margin:
*, *::before, *::after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul,ol,li {
list-style: none;
}
/* General */
.container {
position: relative;
max-width: 1200px;
height: 100%;
margin: 0 auto;
}
/* Title */
.title {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.title_title {
font-size: 24px;
color: #333333;
font-weight: 400;
font-family: "Kaushan Script";
text-align: center;
}
.title_text {
font-size: 30px;
color: #333333;
font-weight: 700;
font-family: "Montserrat";
text-align: center;
text-transform: uppercase;
margin-top: 20px;
}
.title_hr {
width: 60px;
height: 3px;
background-color: #f38181;
margin-top: 40px;
}
/* Service */
.service {
width: 100%;
height: 650px;
}
.service_title {
margin-top: 110px;
}
.service_main {
display: flex;
justify-content: space-between;
margin-top: 65px;
}
.service_block {
display: flex;
}
.service_block svg {
fill: #95e1d3;
margin-right: 30px;
}
.service_text_title {
font-size: 14px;
color: #333333;
font-weight: 700;
font-family: "Montserrat";
text-transform: uppercase;
}
.service_description {
max-width: 300px;
font-size: 15px;
line-height: 24px;
color: #999999;
font-weight: 400;
font-family: "Roboto";
margin-top: 15px;
}
.service_hr {
width: 100%;
height: 1px;
background-color: #e5e5e5;
margin: 50px 0;
}
/* Facture */
.facture {
background: url("img/facture/bg.png") no-repeat;
background-position: top -270px right -43px;
width: 100%;
height: 850px;
}
.facture_bg {
width: 100%;
height: 850px;
background-color: rgba(255, 255, 255, 0.8);
}
.facture_title {
margin-top: 110px;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" contant="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Montserrat:wght@400;700&family=Roboto:ital,wght@0,400;1,300&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<section class="service">
<div class="container">
<div class="service_title title">
<div class="title_title">We work with</div>
<div class="title_text">Amazing Services</div>
<hr class="title_hr">
</div>
<div class="service_main">
<div class="service_block">
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 31" width="32" height="31"><g id="service"><g id="1"><path id="ALARM" class="s0" d="m30.74 9.5c-1.58-3.7-4.55-6.66-8.24-8.24c1-0.79 2.26-1.26 3.63-1.26c3.24 0 5.87 2.63 5.87 5.87c0 1.37-0.47 2.63-1.26 3.63zm-0.24 6.5c0 3.85-1.51 7.34-3.96 9.94l2.03 2.03c0.27 0.27 0.43 0.64 0.43 1.05c0 0.82-0.66 1.48-1.48 1.48c-0.41 0-0.78-0.17-1.05-0.43l-2.18-2.18c-2.35 1.64-5.2 2.61-8.29 2.61c-3.08 0-5.93-0.97-8.28-2.6l-2.16 2.16c-0.27 0.27-0.65 0.44-1.06 0.44c-0.83 0-1.5-0.67-1.5-1.5c0-0.41 0.17-0.79 0.44-1.06l2.01-2.01c-2.44-2.6-3.95-6.08-3.95-9.93c0-8.01 6.49-14.5 14.5-14.5c8.01 0 14.5 6.49 14.5 14.5zm-14.5-11.5c-6.35 0-11.5 5.15-11.5 11.5c0 6.35 5.15 11.5 11.5 11.5c6.35 0 11.5-5.15 11.5-11.5c0-6.35-5.15-11.5-11.5-11.5zm6 13h-6c-0.83 0-1.5-0.67-1.5-1.5v-8c0-0.83 0.67-1.5 1.5-1.5c0.83 0 1.5 0.67 1.5 1.5v6.5h4.5c0.83 0 1.5 0.67 1.5 1.5c0 0.83-0.67 1.5-1.5 1.5zm-20.71-7.79c-0.8-1.02-1.29-2.31-1.29-3.71c0-3.31 2.69-6 6-6c1.4 0 2.69 0.48 3.71 1.29c-3.77 1.62-6.8 4.64-8.42 8.42z" /></g></g></svg>
<div class="service_text">
<div class="service_text_title">Photography</div>
<div class="service_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>
</div>
</div>
<div class="service_block">
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><g id="service"><g id="2"><path id="LINE GRAPH" class="s0" d="m30.5 32h-29c-0.83 0-1.5-0.67-1.5-1.5v-29c0-0.83 0.67-1.5 1.5-1.5h29c0.83 0 1.5 0.67 1.5 1.5v29c0 0.83-0.67 1.5-1.5 1.5zm-1.5-29h-26v26h26v-26zm-23.78 13.24l0 0l4-2.5l0 0c0.23-0.14 0.5-0.22 0.78-0.22c0.31 0 0.6 0.09 0.84 0.26l0.01-0.01l6.63 4.42l7.64-5.39c0.25-0.18 0.55-0.29 0.89-0.29c0.83 0 1.5 0.67 1.5 1.5c0 0.5-0.25 0.94-0.62 1.22l0 0l-8.5 6l0 0c-0.25 0.18-0.55 0.28-0.88 0.28c-0.32 0-0.62-0.1-0.86-0.27l-6.66-4.44l-3.14 1.96c-0.24 0.17-0.53 0.26-0.85 0.26c-0.83 0-1.5-0.67-1.5-1.5c0-0.54 0.29-1.01 0.72-1.28z" /></g></g></svg>
<div class="service_text">
<div class="service_text_title">Web Design</div>
<div class="service_description">Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>
</div>
</div>
<div class="service_block">
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 28" width="32" height="28"><g id="service"><g id="3"><path id="COMPUTER / OK" class="s0" d="m30 23h-7.5h-2v2.5l2 2v0.5h-13v-0.5l2-2v-2.5h-2h-7.5c-0.83 0-1.5-0.67-1.5-1.5v-20c0-0.83 0.67-1.5 1.5-1.5h28c0.83 0 1.5 0.67 1.5 1.5v20c0 0.83-0.67 1.5-1.5 1.5zm-0.5-21h-27v17h27v-17zm-16.5 7c0.41 0 0.79 0.17 1.06 0.44v0l0.94 0.94l2.94-2.94v0c0.27-0.27 0.65-0.44 1.06-0.44c0.83 0 1.5 0.67 1.5 1.5c0 0.41-0.17 0.79-0.44 1.06v0l-4 4v0c-0.27 0.27-0.65 0.44-1.06 0.44c-0.41 0-0.79-0.17-1.06-0.44v0l-2-2v0c-0.27-0.27-0.44-0.65-0.44-1.06c0-0.83 0.67-1.5 1.5-1.5z" /></g></g></svg>
<div class="service_text">
<div class="service_text_title">Creativity</div>
<div class="service_description">Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>
</div>
</div>
</div>
<hr class="service_hr">
<div class="service_main">
<div class="service_block">
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><g id="service"><g id="4"><path id="BOOK 2" class="s0" d="m31.06 25.89l-14.47 5.99c-0.18 0.08-0.38 0.12-0.59 0.12c-0.21 0-0.41-0.04-0.59-0.12l-14.47-5.99c-0.55-0.22-0.94-0.76-0.94-1.39v-23c0-0.83 0.67-1.5 1.5-1.5c0.2 0 0.4 0.04 0.57 0.11h0l0 0c0 0 0.01 0 0.01 0.01l13.91 5.76l13.91-5.76c0 0 0.01 0 0.01-0.01l0 0v0c0.18-0.07 0.37-0.11 0.57-0.11c0.83 0 1.5 0.67 1.5 1.5v23c0 0.63-0.39 1.17-0.94 1.39zm-16.56-17.39l-11.5-4.76v19.75l11.5 4.76v-19.75zm14.5-4.76l-11.5 4.76v19.75l11.5-4.76v-19.75zm-9.12 6.89l5.5-2.5v0c0.19-0.09 0.4-0.13 0.62-0.13c0.83 0 1.5 0.67 1.5 1.5c0 0.61-0.36 1.13-0.88 1.37v0l-5.5 2.5v0c-0.19 0.09-0.4 0.13-0.62 0.13c-0.83 0-1.5-0.67-1.5-1.5c0-0.61 0.36-1.13 0.88-1.37zm0 5.5v0l5.5-2.5v0c0.19-0.09 0.4-0.13 0.62-0.13c0.83 0 1.5 0.67 1.5 1.5c0 0.61-0.36 1.13-0.88 1.37l-5.5 2.5v0c-0.19 0.09-0.4 0.13-0.62 0.13c-0.83 0-1.5-0.67-1.5-1.5c0-0.61 0.36-1.13 0.88-1.37zm0 5.5v0l5.5-2.5v0c0.19-0.09 0.4-0.13 0.62-0.13c0.83 0 1.5 0.67 1.5 1.5c0 0.61-0.36 1.13-0.88 1.37v0l-5.5 2.5v0c-0.19 0.09-0.4 0.13-0.62 0.13c-0.83 0-1.5-0.67-1.5-1.5c0-0.61 0.36-1.13 0.88-1.37zm-13.88-13.63c0.22 0 0.43 0.05 0.62 0.13v0l5.5 2.5v0c0.52 0.24 0.88 0.76 0.88 1.37c0 0.83-0.67 1.5-1.5 1.5c-0.22 0-0.43-0.05-0.62-0.13v0l-5.5-2.5v0c-0.52-0.24-0.88-0.76-0.88-1.37c0-0.83 0.67-1.5 1.5-1.5zm0 5.5c0.22 0 0.43 0.05 0.62 0.13v0l5.5 2.5v0c0.52 0.24 0.88 0.76 0.88 1.37c0 0.83-0.67 1.5-1.5 1.5c-0.22 0-0.43-0.05-0.62-0.13v0l-5.5-2.5v0c-0.52-0.24-0.88-0.76-0.88-1.37c0-0.83 0.67-1.5 1.5-1.5zm0 5.5c0.22 0 0.43 0.05 0.62 0.13v0l5.5 2.5v0c0.52 0.24 0.88 0.76 0.88 1.37c0 0.83-0.67 1.5-1.5 1.5c-0.22 0-0.43-0.05-0.62-0.13v0l-5.5-2.5v0c-0.52-0.24-0.88-0.76-0.88-1.37c0-0.83 0.67-1.5 1.5-1.5z" /></g></g></svg>
<div class="service_text">
<div class="service_text_title">SEO</div>
<div class="service_description">Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</div>
</div>
</div>
<div class="service_block">
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 31" width="32" height="31"><g id="service"><g id="5"><path id="HOME" class="s0" d="m32 16.5c0 0.83-0.67 1.5-1.5 1.5c-0.4 0-0.75-0.16-1.02-0.41l0 0l-13.44-13.44l0 0l-0.04-0.04v0l-13.45 13.45l0 0c-0.27 0.27-0.64 0.43-1.05 0.43c-0.83 0-1.5-0.67-1.5-1.5c0-0.42 0.18-0.81 0.46-1.08l14.46-14.46c0.27-0.28 0.66-0.46 1.08-0.46v0v0c0 0 0 0 0 0c0.03 0 0.05 0 0.08 0c0 0 0.01 0 0.01 0c0.02 0 0.05 0 0.07 0.01c0 0 0 0 0 0c0.37 0.04 0.69 0.21 0.93 0.47l0 0l5.9 5.9v-1.38c0-0.83 0.67-1.5 1.5-1.5c0.83 0 1.5 0.67 1.5 1.5v4.38l5.6 5.6l0 0c0.25 0.27 0.41 0.62 0.41 1.02zm-3 2.5v4.5v2v4c0 0.83-0.67 1.5-1.5 1.5h-3v-12h-6v12h-14c-0.83 0-1.5-0.67-1.5-1.5v-4v-2v-4.5l13-13l13 13zm-15.5 0h-6v6h6v-6z" /></g></g></svg>
<div class="service_text">
<div class="service_text_title">Css/Html</div>
<div class="service_description">Lorem dolor sit amet, consectetur adipiscing elit, sed do tempor.</div>
</div>
</div>
<div class="service_block">
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><g id="service"><g id="6"><path id="IMAGE" class="s0" d="m30.5 32h-29c-0.83 0-1.5-0.67-1.5-1.5v-29c0-0.83 0.67-1.5 1.5-1.5h29c0.83 0 1.5 0.67 1.5 1.5v29c0 0.83-0.67 1.5-1.5 1.5zm-1.5-29h-26v26h26v-26zm-22.5 1.5h5.5h0c0.83 0 1.5 0.67 1.5 1.5c0 0.83-0.67 1.5-1.5 1.5v0h-4.5v4.5v0c0 0.83-0.67 1.5-1.5 1.5c-0.83 0-1.5-0.67-1.5-1.5v0v-5.5v0v-2h2v0zm-2 15.5v0c0-0.83 0.67-1.5 1.5-1.5c0.83 0 1.5 0.67 1.5 1.5v0v4.5h4.5v0c0.83 0 1.5 0.67 1.5 1.5c0 0.83-0.67 1.5-1.5 1.5h0h-5.5v0h-2v-2v0v-5.5zm15.5-15.5h0h5.5v0h2v2v0v5.5v0c0 0.83-0.67 1.5-1.5 1.5c-0.83 0-1.5-0.67-1.5-1.5v0v-4.5h-4.5v0c-0.83 0-1.5-0.67-1.5-1.5c0-0.83 0.67-1.5 1.5-1.5zm0 20v0h4.5v-4.5v0c0-0.83 0.67-1.5 1.5-1.5c0.83 0 1.5 0.67 1.5 1.5v0v5.5v0v2h-2v0h-5.5h0c-0.83 0-1.5-0.67-1.5-1.5c0-0.83 0.67-1.5 1.5-1.5z" /></g></g></svg>
<div class="service_text">
<div class="service_text_title">digital</div>
<div class="service_description">Sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>
</div>
</div>
</div>
</div>
</section>
<section class="facture">
<div class="facture_bg">
<div class="container">
<div class="facture_title title">
<div class="title_title">For all devices</div>
<div class="title_text">Unique design</div>
<hr class="title_hr">
</div>
<div class="facture_main">
</div>
</div>
</div>
</section>
</body>
</html>