pタグ　上に詰めることが出来ない

「詳しくはこちら」というpタグが上に詰められません。周辺のどの要素にもmarginは付いておらず、これ以上詰める方法が見当たりません。どのように対処すればよろしいでしょうか。

![]

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title>事前テスト</title>
6	<link rel="stylesheet" href="css/style.css">
7</head>
8<body>
9	<div class="container">
10		<header>
11			<div>
12				<h2>ZeroPlus</h2>
13				<p>旅行・プログラミング</p>
14			</div>
15			<ul>
16				<li class="list1">ホーム</li>
17				<li class="list1">写真</li>
18				<li class="list1">自己紹介</li>
19				<li>お問い合わせ</li>
20			</ul>
21		</header>
22
23			<img src="img/mv.jpg" alt="" class="img1">
24			<p class="blank b1">lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</p>
25		 
26		<div class="title1">
27			<img src="img/img01.jpg" alt="">
28			<div class="passage">
29				<h2>タイトルタイトル</h2>
30			<p class="blank">lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</p>
31			<p class="detail1">詳しく見る</p>
32			</div>
33			
34		</div>
35
36	</div>
37
38 
39
40	
41</body>
42</html>

css
1@charset "UTF-8";
2
3.container{
4    width: 400px;
5    background-color: gray;
6    padding: 50px 100px;
7    margin: 0 auto;
8}
9
10header{
11    display: flex;
12}
13
14header ul{
15    display: flex;
16    list-style: none;
17    margin-left:auto;
18    margin-top:40px;
19    font-size: 10px;
20}
21
22.list1{
23    margin-right: 20px;
24}
25
26
27header h2{
28    font-size: 20px;
29    margin-bottom: 0px;
30}
31
32header div p{
33    font-size: 10px;
34    margin-top: 0px;
35}
36
37.img1{
38    width:400px;
39    height: auto;
40    margin-top: 30px;
41}
42
43.blank{
44    font-size:5px;
45    transform: scale(0.7);
46    transform-origin: 0 0;
47    
48}
49
50.b1{
51width: 500px;
52overflow-wrap: break-word; 
53margin-left: 20px;
54
55}
56
57.title1{
58    display: flex;
59}
60
61.title1 h2{
62    font-size: 10px;
63}
64
65.title1 img{
66    width: 180px;
67    height: auto;
68}
69
70.passage{
71    margin:0px 0px 0px 25px ;
72    width: 200px;
73}
74
75.passage h2{
76    margin-top: 0px;
77    letter-spacing: 1px;
78}
79
80.passage .blank{
81    width: 250px;
82    margin: 0px;
83}
84
85.detail1{
86    font-size: 10px;
87    transform: scale(0.6);
88    background-color: lightgrey;
89    width:90px;
90    text-align: center;
91    padding-top: 4px;
92    padding-bottom: 4px;
93    margin: 0px;
94    margin-left: auto;
95}

試したこと
・周辺の要素のmarginを全部0にした。

行動規範の内容に同意します

回答1件

ベストアンサー

各要素が配置された後に.blankと.detail1に設定されているtransform:scale()によって要素が縮むことで余白が生まれています。
縮んだサイズでレイアウトされるのではないことに注意が必要です。

投稿2021/08/14 10:26

itagagaki

総合スコア8402

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

pタグ　上に詰めることが出来ない

関連した質問