pasaba por aqui 08 июля 2019 12

html flex: рамка вокруг элемента без увеличения по высоте

pasaba por aqui / 08 июля 2019

В следующем примере граница не находится вокруг синей рамки, а расширяется по всей высоте окна.

Есть ли подсказка, чтобы сделать рамку вокруг синей рамки?

Примечания:

html и определения тела не могут быть изменены.
заполнение в "div1" не может быть изменено.
I 'мы пробовали разные комбинации с "display: inline-block" и т. д., но безуспешно.
Весьма вероятно, что этот вопрос уже задавался.Тем не менее, мой поиск ответа не увенчался успехом.Хороший «дублирующий» совет приветствуется.

html {
	height: 100%;
}

body {
	height: 100%;
 	margin: 0; 
	display: flex;
	flex-direction: row;
}

#div1 {
	padding: 2em; 
	border: 1px solid green;
}

#blueDiv {
	width: 5em;
	height: 5em;
	background-color: blue;
}

<!DOCTYPE html>
<html>
<body>
		<div id="div1">
				<div id="blueDiv"></div>
		</div>
</body>
</html>

Ответы [ 2 ]

DanieleAlessandra / 08 июля 2019

Почему бы вам не использовать контур и контур-смещение непосредственно на # blueDiv ?

html {
	height: 100%;
}

body {
	height: 100%;
 	margin: 0; 
	display: flex;
	flex-direction: row;
}

#div1 {
	padding: 2em;
}

#blueDiv {
	width: 5em;
	height: 5em;
	background-color: blue;
	/* OUTLINE */
	outline: 1px solid green; 
	outline-offset: 5px; 
}

<!DOCTYPE html>
<html>
<body>
		<div id="div1">
				<div id="blueDiv"></div>
		</div>
    <p>There is a green border around the blue box, distant 5 pixels.</p>
</body>
</html>

...