why the span dose'nt want to rotate

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>project B</title> <link rel="stylesheet" href="project B.css"> </head> <body> <header> <img src='someimg.jpeg'> Follow Us ^ select year general information </header> CSS header{z-index: 2; position: absolute; right: 0%; width: 100vw; height:48px;} header p{ display: inline; margin: 85px ; } header img{width:150px; float: right; height: 48px; background-color:azure;} #title{position: absolute; top: 20%; margin-left: 10px; color: aliceblue; z-index: 1;

html css

29th Aug 2020, 12:54 PM

Youssef Ashraf

3 Answers

+ 3

The span isn't rotating because it uses display: inline. You didn't specify a display property for it and a span will default to inline. This should achieve the effect you want: ^ This tiny statement on CSS-tricks illustrates the above suggestion: https://css-tricks.com/when-do-you-use-inline-block/#transform-on-an-inline-element

29th Aug 2020, 1:51 PM

Josh Greig