Invalid property value css ошибка margin

I want to change matgins of an h4 element with styles.css

In the HTML file, the h4 is nested as this:

main div h4 {
  margin: 20px, 0, 0, 0;
  /* want to change top margin */
}

<main role="main" class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5">
  <div style="padding-top: 1.0rem;">
    <ul>...</ul>
    <h4 id='sec_summary'>Summary</h4>
  </div>
</main>

The other styles defined in styles.css work fine. But when I was trying to set h4 margin in the way shown above, I tried different numbers and units, the h4’s margin doesn’t change at all. Why doesn’t the code work?

asked May 23, 2018 at 4:47

remove , :

main div h4 {
    margin: 20px 0 0 0; /* want to change top margin */
}

answered May 23, 2018 at 4:49

EhsanEhsan

12.5k3 gold badges24 silver badges44 bronze badges

You need to remove , from your css and put space instead

main div h4 {
    margin: 20px 0 0 0; /* want to change top margin */
  }

Ehsan

12.5k3 gold badges24 silver badges44 bronze badges

answered May 23, 2018 at 4:48

ZuberZuber

3,3331 gold badge17 silver badges32 bronze badges

You need to remove Commas (,) from your css and put ( )space

You will define individual margin as follow:

  main div h4 {
    margin-top: 20px;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
     }

You will use combine syntax as follow:

   main div h4 {
    margin: 20px 0 0 0;
     }

answered May 23, 2018 at 4:55

Mr. RoshanMr. Roshan

1,74912 silver badges33 bronze badges

Kindly remove , from your CSS margin code and place space between them like,

main div h4 {
  margin: 20px 0 0 0; 
}

If the margin property has four values:

top margin is 20px
right margin is 0px
bottom margin is 0px
left margin is 0px

answered May 23, 2018 at 5:40

Источник

Извините за вопрос, который, вероятно, задавали тысячу раз, но я не мог найти ответа. Я не знаю, почему браузер дает мне Invalid property value для margin-left: 0 auto, но каким-то образом добавляется небольшой запас слева (это ошибка рендеринга?). На самом деле он работает без -left, но я не знаю почему.

Полный пример кода: http://jsfiddle.net/zw7n0h2j/5/

#wrapper {
  width:800px;
}

.figure {
    display: block;
    /* margin: 0; */
    margin-left: 0 auto;
    width: 50%; 
}

.figure img {
    width: 100%;
}

.figure figcaption { 
    width: 100%;
}

<div id="wrapper">
    <figure class="figure" >
        <img src="https://via.placeholder.com/350x150" />
        <figcaption>My caption</figcaption>
    </figure> 
</div>

2 ответа

Лучший ответ

margin-left не может иметь несколько аргументов. в отличие от margin. поэтому margin-left: 0 auto недопустим, поскольку 0 и auto — два отдельных аргумента, а margin: 0 auto действителен, поскольку это сокращение для

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

Они применяются по часовой стрелке, поэтому, если вы сделаете margin: 12px, 13px, 14px, 15px;, поля будут применяться к верхнему, правому, нижнему и левому элементам с уважением.

Подробнее об этом читайте здесь.

Laif
6 Май 2021 в 01:09

Вы можете добавить поля слева от элемента, используя margin-left: 10px.

Вы также можете использовать сокращенное свойство margin, которое следует по часовой стрелке, начиная сверху и до упора влево. [поле: вверху справа внизу слева]

Если вы хотите применить поле 10 пикселей слева от элемента, вы можете использовать margin: 0 0 0 10px

Или, если вы хотите применить поле 10 пикселей как справа, так и слева от элемента, используя сокращенное свойство поля, вы можете использовать margin: 0 10px

Для получения дополнительной информации вы можете обратиться к этой статье о CSS. маржинальные свойства по MDN.

Sanchit Bajaj
6 Май 2021 в 11:27

Источник

Sorry for asking a question that probably has been asked a gazillion times, but I couldnt find an answer. I don’t know why the browser gives me an Invalid property value for margin-left: 0 auto yet somehow a little bit of margin is added to the left (is this a rendering bug?).
It actually works without the -left but I have no idea why.

The complete example code:
http://jsfiddle.net/zw7n0h2j/5/

#wrapper {
  width:800px;
}

.figure {
    display: block;
    /* margin: 0; */
    margin-left: 0 auto;
    width: 50%; 
}

.figure img {
    width: 100%;
}

.figure figcaption { 
    width: 100%;
}

<div id="wrapper">
    <figure class="figure" >
        <img src="https://via.placeholder.com/350x150" />
        <figcaption>My caption</figcaption>
    </figure> 
</div>

asked May 5, 2021 at 22:02

MarcellvsMarcellvs

3671 gold badge2 silver badges13 bronze badges

margin-left cannot have multiple arguments. unlike margin. so margin-left: 0 auto is invalid as 0 and auto are two separate arguments, while margin: 0 auto is valid as this is shorthand for

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

These are applied in a clockwise order, so if you do margin: 12px, 13px, 14px, 15px; the margins would be applied to the top, right, bottom, and left items respectfully.

Read more about it here.

answered May 5, 2021 at 22:09

LibraLibra

2,4281 gold badge8 silver badges24 bronze badges

you can add margin to the left of an element using margin-left: 10px.

You can also make use of the shorthand margin property which follows a clockwise order starting from top and going all the way to the left. [margin: top right bottom left]

If you want to apply 10px margin to the left of the element, you can use margin: 0 0 0 10px

or, if you want to apply a 10px margin to both right and left of the element using the shorthand margin property, you can use margin: 0 10px

For more information, you can refer to this article on CSS margin properties by MDN.

answered May 6, 2021 at 8:27

Источник

KoRNeT46RuS

1 / 1 / 1

Регистрация: 07.03.2012

Сообщений: 78

11.10.2014, 17:15. Показов 52986. Ответов 3

Метки нет (Все метки)

Такая борода (скрин вложил).

CSS

.head-contact{
    float: right;
    background: #f8farb url('images/phone-image.jpg') right top no-repeat;
    border: 2px solid #edf2f6;
    border-radius: 0 0 10px 10px;
    text-align: right;
    margin: 0 6px 0 0;
    padding:  5px 10px;
}

Попрошу без шуток. Я начинающий. В чем проблема? Почему не отображается?

Миниатюры

Invalid property value

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь

3322 / 2842 / 1423

Регистрация: 15.01.2014

Сообщений: 6,170

11.10.2014, 18:12

Цитата
Сообщение от KoRNeT46RuS
Посмотреть сообщение

Почему не отображается?

По иерархии есть стили, которые перекрывают css-правило «background» для «.head-contact». Смотрите там же в инспекторе, где еще определяется это свойство.

KoRNeT46RuS

1 / 1 / 1

Регистрация: 07.03.2012

Сообщений: 78

11.10.2014, 19:58

[ТС]

Цитата
Сообщение от Lazy_Den
Посмотреть сообщение

CSS

*{
    margin: 0;
    padding: 0;
}
img{
    border: none;
}
body{
    background: #f2f2f2;
}
.main{
    background: #fff;
    min-width: 980px;
    max-width: 1200px;
    margin: 0 auto;
}
    /*Шапка сайта*/
    .header{
        overflow: hidden;
    }
    .logo, slogan{
        float: left;
    }
    .logo{
        margin: 8px 0 0 30px;
    }
    .slogan{
        margin: 40px 0 30px 30px;
    }
    .head-contact{
        float: right;
        background: #f8farb url('images/phone-image.jpg') 250px 8px no-repeat;
        border: 2px solid #edf2f6;
        border-radius: 0 0 10px 10px;
        text-align: right;
        margin: 0 6px 0 0;
        padding:  5px 65px 5px 15px;
    }

Вот весь код. Я найти конфликт не могу

3322 / 2842 / 1423

Регистрация: 15.01.2014

Сообщений: 6,170

11.10.2014, 20:24

Лучший ответ Сообщение было отмечено KoRNeT46RuS как решение

Решение

Цитата
Сообщение от KoRNeT46RuS
Посмотреть сообщение

Я найти конфликт не могу

Мде… Можно было бы долго искать. У вас HEX-код цвета (#f8farb) не корректный. Таблица «безопасных» цветов

Источник

недопустимое значение свойства для заполнения

Я получаю недопустимое значение свойства для заполнения, и я не знаю, почему. Этот код написан на рубине, кстати. Когда я проверяю браузер, он имеет правильное значение пикселей, однако он перечеркнут строку и не читает этот атрибут. Заранее спасибо.

<% mywaldo = Mapping::MYWALDOS.sample %>
<!doctype html>
<html>
  <head>
    <title>Sinatra Single-Serve</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <style>
      div {
        width: 1024px;
        height: 768px;
        background-image: url("img/waldos/<%= mywaldo[0]%>") ;
      }
      #waldo {
        position:absolute;
        top: <%= mywaldo[2]%>;
        left: <%= mywaldo[1]%>;
        padding: <%= mywaldo[3]%>, <%= mywaldo[4]%>;
      }
    </style>
  </head>
  <body>
    <div>
      <a id="waldo" href="">AA</a>
    </div>
    <%= yield %> 
  </body>
</html>

Между вашими значениями не должно быть запятой:

    padding: <%= mywaldo[3]%> <%= mywaldo[4]%>;

ответ дан 25 апр.

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками

css
ruby
html

or задайте свой вопрос.

Источник

В общем все написано правильно вроде как, но не отрабатывает, а через tool возле заданного стиля animation желтый треугольник и надпись invalid property value. как это можно исправить

КОД:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Document</title>
</head>
<body>
    
        <div class="wave">
            <div class="wave__one"></div>
            <div class="wave__two"></div>
        </div>

</body>
</html>

CSS:

body{
	padding:0;
	margin:0;
	background-color: #555;
}

.wave{
	width:100%;
	overflow: hidden;
	position:relative;
}

.wave__one {
		background:url("img/wave/wave_top.png") repeat-x;
		width:7000px;
		height: 218px;
		animation: waves 15s infinite lianer;
		position:absolute;
		top:0;
	}

.wave__two {
		background:url("img/wave/wave_top_opacity.png") repeat-x;
		width:7000px;
		height: 218px;
		animation: waves 10s infinite lianer;
		position:relative;
		top:0;
	}

@keyframes waves {
	0% {
		margin-left: 0;
	}
	100% {
		margin-left: -1938px;
	}
}

Источник

На чтение 2 мин. Опубликовано 15.12.2019

Есть вот такое свойство:

Однако хром не показывает ни один из этих фонов, я уже Nцать раз проверил — синтакс правильный, а хром пишет Invalid property value. Огнелис туда же — просто игнорирует. Что такое?

Посмотреть можно здесь в самом низу.

Вопрос задан более трёх лет назад
3528 просмотров

You can do this with both the shorthand background property and the individual properties thereof except for background-color. That is, the following background properties can be specified as a list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

I have some very simple HTML/CSS code, and no matter what I do, I always get an «invalid property value» exception by chrome, and the logo won’t position properly. Thanks for any help.

Fixed the first problem, but now the image does not move related to the border. Sorry, but I’m totally new to web design and need a little bit of help.

I put the below CSS rules in database that are valid in Google Chrome:

When I try to add this rules to a div with JQuery, this rule merged as single rule and get invalid value

How do I know why it is invalid?

If you’ve identified this as a bug this is a bug with a recent version of JQuery, you should report it to the JQuery GitHub issues page; Not here.

A workaround would be to simply set the the style attribute manually.

Источник

ryana

http://ksaverk.ru
Offline Offline

Сообщений: 7

Просмотр профиля
WWW

wordpress,
сайт http://нп-цспб

пытаюсь вставить в хэдэр картинку, выдаёт ошибку invalid property value

уже повставляла во все дивы, картинка (адрес проверяла, работает) не появляется, только цвет можно в бекграунде сделать.
адрес картинки:
http://нп-цспб.рф/wp-content/themes/redpepper/img/Fireman.jpg


	Записан

Mari

Offline Offline

Пол: Женский
Сообщений: 86

Просмотр профиля

ryana, в Опере картинка вставляется.
style.css: 53
#header
background: url(«http://нп-цспб.рф/wp-content/themes/redpepper/img/Fireman.jpg») no-repeat transparent;
Единственное, у Вас ширина картинки 700, а хэдэр width: 780px и высота не прописана.


	Записан

ryana

http://ksaverk.ru
Offline Offline

Сообщений: 7

Просмотр профиля
WWW

спасибо, ширину и высоту пока не делала. Значит, проблема в браузерах — модзилле и хроме. Неужели они что-то в коде не читают? вроде совсем простой css


	Записан

ryana

http://ksaverk.ru
Offline Offline

Сообщений: 7

Просмотр профиля
WWW

Спасибо, но с этого и начинала. не помогает.
в остальном сайте работают отлично записи типа

background: #600 url(img/bg.png)


	Записан

Источник

Invalid property value css ошибка margin

2 ответа

Решение

А вот еще интересные материалы: