Как сделать под картинкой 15px свободного места? - PullRequest
Новая
       0

Как сделать под картинкой 15px свободного места?

1 голос
/ 30 мая 2020

Вот код: https://jsfiddle.net/Krzysiek_35/Ljybwz97/44/

body
{
	left: 8%;
  top: 10%;
  position: absolute;
  background-color: #6699cc;
}

.box3
{
	background-color: #191919;
	position: absolute;
	padding: 15px 40px 0px;
	font-size: 12px;
	color: #DDDDDD;
	font-family: Verdana;
	font-size: 12px;
	width: 400px;
}

.box3 > li
{
	display: flex;
	align-items: center;
}

.box3 > li span
{
	margin: 5px;
}
<body>

	<div class="box3">
  
		<li>
			<img src="pictures/contact/skype.png" width="34px" height="34px" />
			<span>Skype name</span>
		</li>
    
		<li>
			<img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
			<span>Gadu-Gadu number</span>
		</li>
    
		<li>
			<img src="pictures/contact/email.png" width="34px" height="34px" />
			<span>Email address</span>
		</li>
    
	</div>
  
</body>

К сожалению, эти 2 варианта неверны!

Вариант номер 1: 

.box3 > li img
{
	margin-bottom: 15px;
}

Вариант номер 2: 

.box3 > li img
{
	padding: 0px 0px 15px;
}

padding -> 15px (как верхний пробел), 40px (как левый пробел) и 0px (как нижнее пространство)

Как сделать 15px свободного места под картинкой?

Буду очень признателен за действенную помощь.

Ответы [ 2 ]

1 голос
/ 30 мая 2020

просто добавьте нижнюю границу к LI 

body
{
	left: 8%;
  top: 10%;
  position: absolute;
  background-color: #6699cc;
}

.box3
{
	background-color: #191919;
	position: absolute;
	padding: 15px 40px 0px;
	font-size: 12px;
	color: #DDDDDD;
	font-family: Verdana;
	font-size: 12px;
	width: 400px;
}

.box3 > li
{
	display: flex;
	align-items: center;
margin-bottom: 15px;
}

.box3 > li span
{
	margin: 5px;
}
	<div class="box3">
  
		<li>
			<img src="pictures/contact/skype.png" width="34px" height="34px" />
			<span>Skype name</span>
		</li>
    
		<li>
			<img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
			<span>Gadu-Gadu number</span>
		</li>
    
		<li>
			<img src="pictures/contact/email.png" width="34px" height="34px" />
			<span>Email address</span>
		</li>
    
	</div>
1 голос
/ 30 мая 2020

Прежде всего, вы никогда не должны помещать position: absolute в элемент body, потому что это приведет к потере размеров блока. Ваш элемент body на самом деле имеет размер 0x0 пикселей.

Чтобы решить вашу проблему, просто удалите 0 пикселей в заполнении, как я сделал в приведенном ниже коде.

[редактировать] Хорошо, вам нужны все изображения чтобы под ними было место, а не только одна картинка, как было задано в ОП. Я добавил дополнительный код ниже: 

body
{
	left: 8%;
  top: 10%;
  position: absolute;
  background-color: #6699cc;
}

.box3
{
	background-color: #191919;
	position: absolute;
	/* padding: 15px 40px 0px; */
	padding: 15px 40px;
	font-size: 12px;
	color: #DDDDDD;
	font-family: Verdana;
	font-size: 12px;
	width: 400px;
}

.box3 > li
{
	display: flex;
	align-items: center;
}

.box3 > li span
{
	margin: 5px;
}

/* Added. select li that is followed by an li. */
.box3 > li ~ li {
  margin-top: 15px;
}
<body>

	<div class="box3">
  
		<li>
			<img src="pictures/contact/skype.png" width="34px" height="34px" />
			<span>Skype name</span>
		</li>
    
		<li>
			<img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
			<span>Gadu-Gadu number</span>
		</li>
    
		<li>
			<img src="pictures/contact/email.png" width="34px" height="34px" />
			<span>Email address</span>
		</li>
    
	</div>
  
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...